JS 操作属性

操作属性

对象.setAttribute('属性名','值'); - 添加属性
对象.getAttribute('属性名'); - 获取属性值，如无此属性，那么返回null
对象.removeAttribute('属性名'); - 移除属性

例如：

 1 head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title></title>
 4 </head>
 5 <body>
 6 
 7 
 8     <input type="button" value="按钮" id="btn" />
 9 
10 
11 </body>
12 </html>
13 <script type="text/javascript">
14 
15 
16     var zw_btn = document.getElementById('btn');
17     zw_btn.onclick = function () {
18         zw_btn.setAttribute('disabled','disabled');
19     }
20 
21 
22 </script>

View Code

disabled="disabled" 代表禁用

彩虹导航

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .div1 {
            float: left;
            width: 100px;
            height: 30px;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <!--3、有5个导航菜单，颜色分别是红黄蓝绿紫
鼠标移入变为灰色，移除变为之前的颜色
点击变为黑色，同一时间只能有一个黑色-->
    <div class="div1" style="background-color: red;" ss="red"></div>
    <div class="div1" style="background-color: yellow;"ss="yellow"></div>
    <div class="div1" style="background-color: blue;"ss="blue"></div>
    <div class="div1" style="background-color: green;"ss="green"></div>
    <div class="div1" style="background-color: purple;"ss="purple"></div>
</body>
</html>
<script type="text/javascript">
    var div = document.getElementsByClassName('div1');
   
    for (var i = 0; i < div.length; i++) {
        //索引
        div[i].index = i;
        
        //点击
        div[i].onclick = function () {
            for (var j = 0; j < div.length; j++)
            {
               // div[j].getAttribute('ss')是求取一个属性的值  我们把这个值定位和原来颜色一样的值
                div[j].style.backgroundColor = div[j].getAttribute('ss');
            }
            div[this.index].style.backgroundColor = "black";

        }
        //移入
        div[i].onmouseover = function () {
            if (div[this.index].style.backgroundColor != "black")
                div[this.index].style.backgroundColor = "gray";
        }
        //移出
        div[i].onmouseout = function () {
            if (div[this.index].style.backgroundColor == "gray")
                div[this.index].style.backgroundColor = div[this.index].getAttribute('ss');
        }
    }

</script>

JS 操作属性

推荐阅读