设置class元素的三种方式

网络整理 - 07-27
列举所有的方式,看看各浏览器的支持差异。

  一、el.setAttribute('class','abc');

  01 <!DOCTYPE HTML>

  02 <HTML>

  03  <HEAD>

  04     <meta charset="utf-8" />

  05     <title>setAttribute('class', 'abc')</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.setAttribute("class", "abc");

  17     </script>

  18  </BODY>

  19 </HTML>

  IE6/7 : div背景色不是红色

  IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色

  结果:IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

  二、el.setAttribute('className', 'abc')

  01 <!DOCTYPE HTML>

  02 <HTML>

  03  <HEAD>

  04     <meta charset="utf-8" />

  05     <title>setAttribute('className', 'abc')</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.setAttribute("className", "abc");

  17     </script>

  18  </BODY>

  19 </HTML>

  IE6/7 : div背景色为红色

  IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色

  结果:IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。

  很有趣,使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。

  三、el.className = 'abc';

  01 <!DOCTYPE HTML>

  02 <HTML>

  03  <HEAD>

  04     <meta charset="utf-8" />

  05     <title>el.className = 'abc'</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.className = 'abc';

  17     </script>

  18  </BODY>

  19 </HTML>

  所有浏览器都支持。