要求：

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

实现思路：

  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. Android Studio出现：Your project path contains non-ASCII 错误代码解决方法

    导入Project的出现: Error:(1, 0) Your project path contains non-ASCII characters. This will most likely ca ...

  2. Idea使用方式——创建类模板

    问题:创建类或接口时,要添加自定义的默认注释,比如版本,时间等.每个类修改显然不符合程序员的思路,有没有办法通过定义模板来实现? 使用Idea模板 Idea可听过创建类模板来实现. 功能路径:Sett ...

  3. .NET Core 中导入导出Excel

    操作Excel是一个比较常见的业务场景,本篇将使用EPPlus简单演示一个导入导出的示例. EPPlus开源地址:https://github.com/EPPlusSoftware/EPPlus 在项 ...

  4. java 注解开发

    目录 注解 JDK自带的注解三个 注解分类 按照运行机制 按照来源分类 自定义注解的语法要求 元注解 解析注解 获取注解的注解 Spring中的注解 组合注解 注解 JDK自带的注解三个 @Overr ...

  5. Educational Codeforces Round 65 (Rated for Div. 2)(ACD)B是交互题，不怎么会

    A. Telephone Number A telephone number is a sequence of exactly 11 digits, where the first digit is  ...

  6. Activiti7 zip部署,查询及其删除

    zip部署 package com.itheima.activiti; import org.activiti.engine.ProcessEngine; import org.activiti.en ...

  7. Mockito在JUnit测试中的使用

    Mockito是一种用于替代在测试中难以实现的成员,从而让testcase能顺利覆盖到目标代码的手段.下面例子将展示Mockito的使用. 完整代码下载:https://files.cnblogs.c ...

  8. 转载：SQL语句执行顺序

    转载地址:https://database.51cto.com/art/202001/609727.htm

  9. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

  10. kickstart半自动安装centos系统与pxe自动安装centos系统

    一.kickstart半自动安装centos系统 关闭防火墙,关闭selinux,使用system-config-kickstart生成kickstart配置文件,启动xmanger-Passive ...