(四)学习JavaScript之className属性

参考：http://www.w3school.com.cn/jsref/prop_classname.asp

HTML DOM Anchor 对象

定义和用法

className 属性设置或返回元素的 class 属性。

语法

object.className=classname

 

className作用:添加和替换class

<html>
<head>
    <title>添加和替换class</title>
    <style type="text/css">
        .on1 {
            font-size: 5em;
            color: red;
        }
        .on2{
            text-decoration: underline;
        }
        .on3 {
            color: blue;
        }
    </style>
    <script language="javascript">
        function addClass() {
            var a = document.getElementById('div1');
            a.className += " on2";//引号内容前面留一个空格，否则新旧两个class名称连在一起，没有效果。
        }
        function changeClass() {
            document.getElementById('div2').className = "on3";
        }
    </script>
</head>
<body>
    <div id="div1" onclick="addClass()" class="on1">123456</div>
    <div id="div2" onclick="changeClass()" class="on1">123456</div>
</body>
</html>

 

posted @ 2014-09-03 21:53  wiming  阅读(278)  评论(0)  编辑  收藏  举报