Dom——排他思想

最新推荐文章于 2023-02-26 22:51:57 发布

原创

最新推荐文章于 2023-02-26 22:51:57 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dom

本文介绍了DOM中的排他思想，通过案例解释了如何实现点击按钮时仅改变当前选中按钮的样式。此外，详细阐述了排他思想在实现tab栏切换布局中的核心思路，涉及到自定义属性的使用，包括获取、设置和移除属性值的方法。通过这个布局实例，强调了排他思想在保持元素样式一致性中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

排他思想

概念

排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法

所有元素全部清除样式

给当前元素设置样式

注意顺序不能颠倒

案例

效果如上图所示。

当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。

代码

html部分

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

javascript部分

<script>
    var btns = document.getElementsByTagName('button');
    // 用for循环遍历所有按钮
    for (i = 0; i < btns.length; i++) {
   
   
        btns[i].onclick = function() {
   
   
            for (let i = 0; i < btns.length; i++) {
   
   
            // 清除所有样式
                btns[i].style.backgroundColor = '';
            }