（排他思想）的应用 -----JavaScript 元素样式选择器

首先，是排他思想：

就是指 当我们选择某一个元素后给其设置特殊的样式，而其他的保持不变；我们可以先将所有的样式某同一个属性全部清除掉（列如：背景设置为空），再给某一个被点击的元素设置上：

本文以：有5个按钮，当点击其中某一个元素时，其背景颜色改变

示：

首先创建5个按钮，value为'按钮'

    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>

/*1. 首先、获取事件源 这里使用的是getElementsByTagName（）也可以使用如querySelector()等选择器 */

       /*获取事件源/
        var btns = document.getElementsByTagName('button');
        /* 2. 由于有多个按钮元素，我们可以使用循环给每一个元素添加事件 */
        for(var i =0;i<btns.length;i++){
               /* 3. 绑定事件  4.事件处理程序/
               btns[i].onclick = function () {
                /* 使用排他思想****（关键） */
                /* 先将所有元素的背景设置为空  */
                for(var i =0;i<btns.length;i++){
                        btns[i].style.backgroundColor = '';   
                }
               /* 给被点击的按钮添加背景颜色 这里可以使用this 因为代表的选择的当前对象   给点击的元素背景设置成’pink‘颜色   大功告成????????????????????????*/
               this.style.backgroundColor = 'pink';
                }
        }

最后

以上就是义气豌豆为你收集整理的（排他思想）的应用 -----JavaScript 元素样式选择器的全部内容，希望文章能够帮你解决（排他思想）的应用 -----JavaScript 元素样式选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。