排他思想..........

最新推荐文章于 2024-05-31 19:09:15 发布

cc&

最新推荐文章于 2024-05-31 19:09:15 发布

阅读量64

点赞数

分类专栏： js 文章标签： javascript elementui html

本文链接：https://blog.csdn.net/grow_/article/details/124941682

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

排他思想：排除其他元素，给自己添加效果（独享一份）；

按钮案例；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>

    <body>
        <button>btn1</button><button>btn2</button><button>btn3</button><button>btn4</button><button>btn5</button>
        <script>
            var btns = document.querySelectorAll('button')
            for (var i = 0; i < btns.length; i++) {
                btns[i].onmouseover = function() {
                    // 1. 将全部的背景色样式去除
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].removeAttribute('style')
                    }
                    // 2. 设置1个样式
                    this.style.background = 'pink'
                }
            }
        </script>
    </body>

</html>

</html>

</html>

cc&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
排他思想..........

排他思想：排除其他元素，给自己添加效果（独享一份）；按钮案例；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
复制链接

扫一扫