要求：

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

实现思路：

  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. ES6--Array.prototype.fill 替换数组

    Array.prototype.fill

  2. python小白入门基础（四：浮点型和布尔型）

    # Number (int float bool complex)# (1) float 浮点型 也就是小数# 表达方式一floatvar = 0.98print(floatvar)print(typ ...

  3. 【HttpRunner v3.x】笔记 ——2. 用脚手架快速创建项目

    环境装好了,相信很多童鞋已经迫不及待的想run起来了,但是面对一个陌生的框架又无从下手.没关系,我们可以用脚手架来快速生成一个httprunner项目. 一.快速生成项目 我们不妨先输入httprun ...

  4. Laravel5的验证码功能

    第三方扩展包 mews/captcha 作为基础来实现 Laravel 中的验证码功能 安装 注册 配置验证码文件 前端引用 后端验证 安装前准备(我这边没执行这个,安装成功,但是搜到的文件有写,不清 ...

  5. MySQL 外部联结 内连接、左右外连接辨析

    内连接 在进行跨表内连接查询数据时,查询结果只返回符合查询条件的数据:跨表内连接查询的结果和使用where的多表查询结果相同,其实就是普通的查询,没啥好说的 -- 语法: SELECT 别名1.字段名 ...

  6. 《神经网络的梯度推导与代码验证》之vanilla RNN前向和反向传播的代码验证

    在<神经网络的梯度推导与代码验证>之vanilla RNN的前向传播和反向梯度推导中,我们学习了vanilla RNN的前向传播和反向梯度求导,但知识仍停留在纸面.本篇章将基于深度学习框架 ...

  7. Mysql用户权限控制（5.7以上版本）

    1.1. 最简单的MySql权限   最简单也是最高效的,如果解决新手们删库跑路的问题其实也是很简单的,对于正式库只给一个增删改查的权限,或者只给一个查询权限(是不是就解决了删库的可能性?) 使用Ro ...

  8. leetcode刷题-56合并区间

    题目 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]]输出: [[1,6],[8,10],[15,18]] 思路 通过设置一个移 ...

  9. Typora第一次使用

    一级标题 二级标题 三级标题 三个# + 空格 分割线 三个- 三个* 粗体 ctrl + B 斜体 ctrl + I 删除线 引用 一个大于号就可以了 图片: ! + [] + (图片路径) 超链接 ...

  10. Playbook使用，编写YAML

    YAML是什么? YAML是一个可读性高.用来表达数据序列的格式语言 YAML:YAML Ain't a Markup Language YAML以数据为中心,重点描述数据的关系和结构 YAML的格式 ...