zoukankan      html  css  js  c++  java
  • js中设置元素class的三种方法小结

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

    复制代码 代码如下:

    <!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>


    IE6/7 : div背景色不是红色
    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色
    结果:IE6/7不支持setAttribute('class',xxx)方式设置元素的class。
    二、el.setAttribute('className', 'abc')

    复制代码 代码如下:

    <!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>


    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';

    复制代码 代码如下:

    <!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>


    所有浏览器都支持。

  • 相关阅读:
    HDU 5486 Difference of Clustering 图论
    HDU 5481 Desiderium 动态规划
    hdu 5480 Conturbatio 线段树 单点更新,区间查询最小值
    HDU 5478 Can you find it 随机化 数学
    HDU 5477 A Sweet Journey 水题
    HDU 5476 Explore Track of Point 数学平几
    HDU 5475 An easy problem 线段树
    ZOJ 3829 Known Notation 贪心
    ZOJ 3827 Information Entropy 水题
    zoj 3823 Excavator Contest 构造
  • 原文地址:https://www.cnblogs.com/firstdream/p/4647875.html
Copyright © 2011-2022 走看看