js之排他思想及案例

最新推荐文章于 2024-05-05 16:12:15 发布

小白蛋挞

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量1.1k

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_61547956/article/details/124214061

版权

本文通过四个实例——包括按钮点击变色、百度换肤效果、表格高亮和表单全选/取消全选——详细介绍了JavaScript中的排他思想，展示了如何在实际操作中运用这种思想来实现特定功能。

摘要由CSDN通过智能技术生成

案例一：五个按钮，点击谁谁的背景颜色变成粉色

  var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //先把所有的背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //然后再让当前的元素按钮变色
                this.style.backgroundColor = 'pink';
            }
        }

案例二百度换肤效果

  var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {