JavaScript按钮排他思想
要求：
有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。
实现思路：
- 获取所有按钮元素
- 首先先把其他按钮的背景颜色去掉
- 再单独设置自己的样式
代码实现：
仅展示<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按钮排他思想的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- Js中的排他思想
<body> <button>按钮1</button> <button>按钮2</button> <butto ...
- js 排他思想案例
<!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...
- Javascript 解读与思想
Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维
- 聚焦JavaScript面向对象的思想
面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...
- JavaScript结构三层——思想快速介绍
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...
- JavaScript结构三层——思想快速入门
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...
- 浅谈javascript的面向对象思想
面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...
- [Javascript] 面向对象编程思想
1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...
随机推荐
- 【小白学PyTorch】5 torchvision预训练模型与数据集全览
文章来自:微信公众号[机器学习炼丹术].一个ai专业研究生的个人学习分享公众号 文章目录: 目录 torchvision 1 torchvision.datssets 2 torchvision.mo ...
- HashMap位运算你可知一二
前置位运算知识 我们平时在写代码过程中用的位运算操作比较少,因为我们更关注于可读性而不是性能,如果为了性能而使用较多的位运算,我想我们的同事会疯掉.但在框架里位运算却非常常见,因为框架的性能是我们关注 ...
- JavaScript 的 this 指向和绑定详解
JavaScript 中的 new.bind.call.apply 实际这些都离不开 this,因此本文将着重讨论 this,在此过程中分别讲解其他相关知识点. 注意: 本文属于基础篇,请大神绕路.如 ...
- github学生认证——申请学生开发包
写在前面 申请学生认证的好处: GitHub学生的免费AWS Educate入门帐户,价值100美元. 专业的桌面IDE:IntelliJ IDEA,PyCharm等.学生的免费订阅,每年更新一次. ...
- linux基础一(目录结构）
一.linux目录结构 1.根目录/下 bin:用户二进制文件,常用命令都在此目录下 sbin;这个目录下的linux命令通常由系统管理员使用 etc:包含所有程序所需的配置文件,以及服务的启动文件 ...
- hexo博客front-matter格式
通用格式 Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说: --- title: Hello World date: 2013/7/13 20:46:2 ...
- oracle之时间类型
Oracle 时间类型及Timezone 20.1 Oracle的六种时间类型 DATETIMESTAMPTIMESTAMP WITH TIME ZONETIMESTAMP WITH LOCAL TI ...
- mysql浅谈--事务ACID特性
mysql MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数据库管 ...
- mysql读写分离--一主多从，冗余存储
转载了https://blog.csdn.net/u013421629/article/details/78793966 https://blog.csdn.net/justdb/article/de ...
- JAVA之代理2CGLib
对于CGLib的代理目前还是知道如何使用,以及理论上它的原理,到源码上的理解还没到位 https://www.jianshu.com/p/9a61af393e41?from=timeline& ...