JS 操作属性

bluestorm 阅读：66 2022-09-29 10:02:35 评论：0

操作属性

对象.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>

本文参考链接：https://www.cnblogs.com/zhangwei99com/p/6653578.html