DOM（二）_html按钮点击改变颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/123203559

本文详细介绍了如何运用排他思想在JavaScript中控制按钮变色和表格背景切换，同时展示了如何设置和获取自定义属性，以及在Tab栏切换和商品介绍页面中的应用。

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

排他操作

1.排他思想简介

排他思想，简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。

2.【案例】点击按钮使按钮变色

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <script>
        var btns = document.querySelectorAll("button");
    
        for(var i=0;i<btns.length;i++){
    
            btns[i].onclick = function(){
                
                for(var j=0;j<btns.length;j++){
                    
                    btns[j].style.backgroundColor = "";
                }
                this.style.backgroundColor = "pink";
            }
        }
    </script>
</body>

效果图如下：
在这里插入图片描述

3.【案例】鼠标经过时背景变色

<body>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th width="50px">姓名</th>
                    <th width="75px">学号</th>
                    <th width="100px">地址</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小明</td>
                    <td>24193018</td>
                    <td>陕西省西安市</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>24193018</td>
                    <td>陕西省西安市</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>24193018</td>
                    <td>陕西省西安市</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var trs = document.querySelector("tbody").querySelectorAll("tr");
        
        for(var i=0;i<trs.length;i++){

            trs[i].onmouseover = function(){

                this.style.backgroundColor = "pink";
            }
            trs[i].onmouseout = function(){
                
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>

在这里插入图片描述

属性操作

1.获取属性值

在DOM中，可以使用getAttribute(‘属性’)方法来返回指定元素的属性值。

<body>
    <div id="demo" index="1" class="nav"></div>

    <script>
        var div = document.querySelector("div");

        console.log("id="+div.id);
        console.log("id=",div.getAttribute("id"));
        console.log("index=",div.getAttribute("index"));
        console.log("class=",div.getAttribute("class"));
    </script>
</body>

2.设置属性值

在DOM对象中可以使用“element.属性= ‘值’”的方式来设置内置的属性值，并且针对于自定义属性，提供了“element.setAttribute(‘属性’, ‘值’)”的方式进行获取。

<body>
    <div></div>

    <script>
        var div = document.querySelector("div");

        div.id = "test";
        div.className = "nav";
        div.setAttribute("index",1)
    </script>
</body>

在这里插入图片描述

3.移除属性值

在DOM中使用“element.removeAttribute(‘属性’)”的方式来移除元素属性。

<body>
    <div id="test" class="nav" index="1"></div>

    <script>
        var div = document.querySelector("div");

        div.removeAttribute("id");
        div.removeAttribute("class");
        div.removeAttribute("index")
    </script>
</body>

4.【案例】Tab栏切换

<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    .tab{
        width: 850px;
        margin: 100px auto;
    }
    .tab_list{
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    .tab_list li{
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 40px;
        text-align: center;
        cursor: pointer;
    }
    .tab_list .current{
        background-color: #c81623;
        color: #fff;
    }
    .item{
        display: none;
    }
</style>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品简介的内容</div>
            <div class="item">规格与包装的内容</div>
            <div class="item">售后保障的内容</div>
            <div class="item">商品评价的内容</div>
            <div class="item">手机社区的内容</div>
        </div>
    </div>
    <script>
        //获取标签部分的所有元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        //获取所有的内容
        var items = document.querySelectorAll('.item')

        //给每个标签绑定click事件
        for(var i=0;i<lis.length;i++){ 
            //给每个标签添加index属性
            lis[i].setAttribute('index',i);
            lis[i].onclick = function(){
                for(var j=0;j<lis.length;j++){ //排他：去掉所有标签的样式
                    lis[j].className = ''
                }
                this.className = "current"

                //获取所有的内容模块
                var index = this.getAttribute('index'); //获取当前标签的index
                for(var k=0;k<items.length;k++){ //排他：将所有的item隐藏
                    items[k].style.display = 'none'
                }
                items[index].style.display = 'block';//显示索引为index的item
            } 
        }
    </script>
</body>

在这里插入图片描述

自定义属性

一般的自定义属性可以通过getAttribute(‘属性’)方法来获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的自带属性还是自定义属性。因此，HTML5新增了自定义属性的规范，在HTML5中规定通过“data-属性名”的方式设置自定义属性。

1.设置属性值

（1）在HTML中设置自定义属性

    <div data-id="test"></div>    
    <!-- data-表示前缀，index是自己定义的属性名 -->

（2）在JavaScript中设置自定义属性

在JavaScript代码中，可以通过setAttribute(‘属性’, 值)或者“元素对象.dataset.属性名=‘值’”两种方式设置自定义属性。需要注意的是，通过后者的方式只能设置以“data-”开头的自定义属性。

<body>
    <div></div>

    <script>
        var div = document.querySelector("div");

        div.dataset.id = "test";
        div.setAttribute("class","nav");
    </script>
</body>

2.获取属性值

在DOM操作中，提供了两种获取属性值的方式，第1种是通过getAttribute()方式，该方式可以获取内置属性或者自定义属性；第2种是使用HTML5新增的“element.dataset.属性”或者“element.dataset[‘属性’] ”方式（有兼容性问题）。

<body>
    <p class="nav" data-name="张三" data-list-phone="123456"></p>
</body>
<script>
    var p =document.querySelector("p");

    console.log(p.getAttribute("class"));
    console.log(p.getAttribute("data-name"));
    console.log(p.getAttribute("data-list-phone"));

    console.log(p.dataset.name);
    console.log(p.dataset.listPhone);
</script>