Summary of three ways to set element class in js

1. ('class','abc');

Copy the codeThe code is as follows:

 
<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('class', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div >test div</div> 
<script> 
var div = ('d1'); 
("class", "abc"); 
</script> 
</BODY> 
</HTML> 

IE6/7: The div background color is not red
IE8/9/10/Firefox/Safari/Chrome/Opera: The background color of the div is red
Result: IE6/7 does not support setting the class of the element.
2. ('className', 'abc')

Copy the codeThe code is as follows:

 
<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('className', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div >test div</div> 
<script> 
var div = ('d1'); 
("className", "abc"); 
</script> 
</BODY> 
</HTML> 

IE6/7: The background color of the div is red
IE8/9/10/Firefox/Safari/Chrome/Opera: The div background color is not red
Result: IE8/9/10/Firefox/Safari/Chrome/Opera does not support setting the class of the element.
It's very interesting. When using setAttribute, the first parameters are class and className. IE6/7 and IE8/9/10/Firefox/Safari/Chrome/Opera are just the opposite.
3. = 'abc';

Copy the codeThe code is as follows:

 
<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title> = 'abc'</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div >test div</div> 
<script> 
var div = ('d1'); 
 = 'abc'; 
</script> 
</BODY> 
</HTML> 

All browsers support it.