排他思想（小算法）

最新推荐文章于 2024-05-17 13:52:13 发布

m_0_1_0_1

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量76

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123757334

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：该算法思想适用于有同一组元素，我们想要某一元素实现某种样式，需要用到循环的排他思想。

1、先把所有元素的样式全部清除掉（干掉他人）

2、再给当前元素设置样式（留下自己）

3、注意顺序不能颠倒。

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btn = document.getElementsByTagName("button");
        //btn得到是伪数组，里面的每个元素是btn[i]
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                for (var i = 0; i < btn.length; i++) {
                //先把所有按钮背景颜色去掉
                    btn[i].style.backgroundColor = "";
                }
                //设置当前元素的背景颜色
                this.style.backgroundColor = "pink";
            };
        }
    </script>
</body>

m_0_1_0_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
排他思想（小算法）

思路：该算法思想适用于有同一组元素，我们想要某一元素实现某种样式，需要用到循环的排他思想。1、先把所有元素的样式全部清除掉（干掉他人）2、再给当前元素设置样式（留下自己）3、注意顺序不能颠倒。<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4<.
复制链接

扫一扫