classList用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classList</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
margin: 10px 0;
background-color: blue;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
/*classList:获取class列表属性
length class的长度
add() 添加class方法
remove() 删除class方法
toggle() 切换class方法
*/
var box = document.querySelectorAll('.box');
/*for (var i = 0; i < box.length; i++) {
box[i].isChecked = false;
box[i].onclick = function () {
if (this.isChecked) {
this.className = 'box';
} else {
this.className = 'box red';
}
this.isChecked = !this.isChecked;
}
}*/
/*for (var i = 0; i < box.length; i++) {
box[i].isChecked = false;
box[i].onclick = function () {
console.dir(this);
if (this.isChecked) {
this.classList.remove('red');
} else {
this.classList.add('red');
}
this.isChecked = !this.isChecked;
}
}*/
// 三目写法
for (var i = 0; i < box.length; i++) {
box[i].isChecked = false;
box[i].onclick = function () {
console.dir(this);
/*if (this.isChecked) {
this.classList.remove('red');
} else {
this.classList.add('red');
}*/
// this.isChecked ? this.classList.remove('red') : this.classList.add('red');
this.classList[this.isChecked?'remove':'add']('red');
this.isChecked = !this.isChecked;
}
}
</script>
</body>
</html>
classList用法的更多相关文章
- js 控制 class 类名(classList) 和 自定义属性(dataset)
classList 用法: const div = document.querySelector('div') div.classList.add('myclass') // 添加类名 div.cla ...
- position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- C#中List<T>用法
所属命名空间:System.Collections.Generic public classList<T> :IList<T>,ICollection<T>,IEn ...
- class的二般用法
一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式.举个例子: <ul> <li><span>1< ...
- js设置元素class方法小结及classList相关
给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...
- HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
- JavaScript常用，继承，原生JavaScript实现classList
原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 C ...
- 学习前端的菜鸡对JS 的classList理解
classList 在早期的时候要添加,删除类 需要用className去获取,然后通过正则表达式去判断这个类是否存在. 代码上去会有点麻烦,现在有了classList 就方便了很多. ——————— ...
- forEach，for in，for of循环的用法
一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,a ...
随机推荐
- day1:java学习第一天之eclipse安装
选择开发语言的学习其实不用纠结,如果你说自己是做开发的,连最流行的开发语言都不会,好像说不过去,并且最流行也说明用的人多,优秀的人也会,自己要提高要多向优秀的人学习.想明白这点其实选择就好说了,再一个 ...
- 【速读】——Shangxuan Tian——【ICCV2017】WeText_Scene Text Detection under Weak Supervision
Shangxuan Tian——[ICCV2017]WeText_Scene Text Detection under Weak Supervision 目录 作者和相关链接 文章亮点 方法介绍 方法 ...
- maven 安装m2e 报错
Eclipse安装maven插件m2e m2e - http://m2eclipse.sonatype.org/sites/m2e m2e-extras - http://m2eclipse.sona ...
- Mysql 版本号、存储引擎、索引查询
[1]Mysql 版本号.存储引擎.索引查询 # 查看数据库版本号 SELECT VERSION(); # 查看数据库支持的引擎(默认即Support == DEFAULT行) SHOW ENGINE ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
- Redis连接池
package com.lee.utils; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; impor ...
- phpstrom 快速定位到当前编辑文件
方法1(手动定位): 打开所要查找的文件,然后点击上图中红框中的按钮即可快速定位. 方法二(自动定位): Project面板右上角有个准星类的图标,点击后勾选上Autoscorll from Sour ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- CEF 自定义用户协议(scheme)实现以二进制流的方式显示图片、视频、音频
转载:https://www.cnblogs.com/sinceret/p/10417941.html 转载:https://stackoverflow.com/questions/48811756/ ...
- HDU 2665 Kth number（主席树静态区间第K大）题解
题意:问你区间第k大是谁 思路:主席树就是可持久化线段树,他是由多个历史版本的权值线段树(不是普通线段树)组成的. 具体可以看q学姐的B站视频 代码: #include<cmath> #i ...