JS 操作属性-优快云博客

本文介绍如何使用JavaScript操作HTML元素的属性，包括添加、获取及删除属性，并通过具体示例展示了如何实现按钮禁用及动态修改网页中元素的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作属性

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