要求：

有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。

实现思路：

  1. 获取所有按钮元素
  2. 首先先把其他按钮的背景颜色去掉
  3. 再单独设置自己的样式

代码实现：

仅展示<body></body>标签内的内容

<body>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

    <script>

        var btns = document.getElementsByTagName('button');

        // 获取所有按钮元素

        for (var i = 0; i < btns.length; i++) {

            btns[i].onclick = function() {

                for (var j = 0; j < btns.length; j++) {

                    btns[j].style.backgroundColor = '';

                }

                // 先把其他按钮的背景颜色去掉

                this.style.backgroundColor = 'red';

                // 单独设置自己的样式

            }

        }

    </script>

</body>

JavaScript按钮排他思想的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. Js中的排他思想

    <body>     <button>按钮1</button>     <button>按钮2</button>     <butto ...

  3. js 排他思想案例

    <!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...

  4. Javascript 解读与思想

    Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维

  5. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  6. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  7. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  8. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...

  9. [Javascript] 面向对象编程思想

    1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...

随机推荐

  1. 上海做假证t

    上海做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...

  2. 2d 骨胳动画

    cocos2d下,优秀骨骼spine的换装思路 https://www.jianshu.com/p/a0019c6cf7ba

  3. Lua_C_C#

    lua调用c函数 https://www.cnblogs.com/etangyushan/p/4384368.html Lua中调用C函数 https://www.cnblogs.com/sifenk ...

  4. Kubernetes K8S之资源控制器Job和CronJob详解

    Kubernetes的资源控制器Job和CronJob详解与示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 2 ...

  5. ELK入门及基本使用

    预备知识-Restful 起源 在没有前后端分离概念之前,一个网站的完成总是“all in one”,在这个阶段,页面.数据.渲染全部在服务端完成,这样做的最大的弊端是后期维护,扩展极其痛苦,开发人员 ...

  6. Zookeeper协议篇-Paxos算法与ZAB协议

    前言 可以自行去学习一下Zookeeper中的系统模型,节点特性,权限认证以及事件通知Watcher机制相关知识,本篇主要学习Zookeeper一致性算法和满足分布式协调的Zab协议 Paxos算法 ...

  7. 关于Vue-Router的那些事儿

    Vue-Router Vu-router是Vue.js的官方路由管理器,方便于构建页面,在我们的使用过程中,一般是在router的index.js文件中配置对应的组件和对应的路径 主要的功能 嵌套路由 ...

  8. Scrapy框架的架构原理解析

    爬虫框架--Scrapy 如果你对爬虫的基础知识有了一定了解的话,那么是时候该了解一下爬虫框架了.那么为什么要使用爬虫框架? 学习框架的根本是学习一种编程思想,而不应该仅仅局限于是如何使用它.从了解到 ...

  9. 秒懂JVM的三大参数类型，就靠这十个小实验了

    秒懂JVM的三大参数类型,就靠这十个小实验了 你好,我是悟空哥,「7年项目开发经验,全栈工程师,开发组长,超喜欢图解编程底层原理」.手写了2个小程序,Java刷题小程序,PMP刷题小程序,已发布到公众 ...

  10. SpringCloud实战 | 第二篇：SpringCloud整合Nacos实现注册中心

    前言 随着eureka的停止更新,如果同时实现注册中心和配置中心需要SpringCloud Eureka和SpringCloud Config两个组件;配置修改刷新时需要SpringCloud Bus ...