排他操作,就是先排除掉其他元素,然后再给自身元素设置想要实现的效果。例如,在开发中,有统一组元素,如果只允许其中一个元素拥有特定样式,这时就可以使用排他操作来实现。接下来通过案例的形式讲解排他操作。
(1)编写HTML结构代码,示例代码如下。
代码HTML效果图(2)编写JavaScript代码,实现单击按钮,改变当前按钮背景效果,示例代码如下.
代码 HTML效果图
最后结果在HTML页面显示随机点击一个按钮会变成粉色,且其他按钮不变.
整体代码及其效果
上诉代码中,第3行代码获取所有按钮元素,存储在btns为数组中.第5~14行代码使用for循环遍历为数组中的每一个元素btns[i].第6行代码给每一个元素添加单击事件.第8~10行代码利用for循环首先吧所有的按钮背景颜色去掉,然后在第12行给当前元素设置背景颜色为pink.