JavaScript设置元素Class的三种方法及浏览器兼容性分析

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

方法一：使用setAttribute('class')

在IE6和IE7浏览器中，div的背景色不会显示为红色。

在IE8、IE9、IE10、Firefox、Safari、Chrome和Opera等浏览器中，div的背景色正常显示为红色。

结论：IE6和IE7浏览器不支持使用setAttribute('class', xxx)的方式来设置元素的class属性。

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

方法二：使用setAttribute('className')

在IE6和IE7浏览器中，div的背景色成功显示为红色。

在IE8、IE9、IE10、Firefox、Safari、Chrome和Opera等浏览器中，div的背景色不显示为红色。

结论：IE8、IE9、IE10、Firefox、Safari、Chrome和Opera浏览器不支持使用setAttribute('className', xxx)的方式来设置元素的class属性。

有趣的是，在使用setAttribute方法时，第一个参数分别使用'class'和'className'的情况，在IE6/7与IE8/9/10/Firefox/Safari/Chrome/Opera之间的表现恰好相反。

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

方法三：直接赋值el.className

该方法在所有主流浏览器中均能得到支持，兼容性最佳。