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 ...
随机推荐
- JavaScript之jsx&react
1.Virtual DOM 1.将网页所有内容映射到一颗树形结构的层级对象模型上,浏览器提供对dom的支持,用户可以是用脚本调用dom,api来动态修改dom节点,从而达到修改网页目的,这种修改是浏览 ...
- P3974 [TJOI2015]组合数学
题目描述 为了提高智商,ZJY开始学习组合数学.某一天她解决了这样一个问题:给一个网格图,其中某些格子有财宝.每次从左上角出发,只能往右或下走.问至少要走几次才可能把财宝全捡完. 但是她还不知足,想到 ...
- 关于Win10安装vs2013简体中文语言包无法安装的问题
Win10下安装VS2013后无法安装VS2013中文简体语言包,提示Windows程序兼容模式已打开. 解决方案: 1,随便找个文件夹将简体中文语言包放入其中,发送快捷方式到桌面,右击快捷方式 选择 ...
- 关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲
关于Xamarin.Qml.数据绑定.MVC.MVVM 相关的散讲 SURFSKY 2017.02 最近又在学习Xamarin了?为什么是“又”?有几个利好消息,让我重新拾起它: ()微软去年收购了X ...
- shell的输入参数
$# 参数格式 $0 $1 $2 ...第一个,第二个参数...
- Hunspell介绍及试用
1.简介 Hunspell是一个为拥有多态和复杂组合词的语言所设计的拼写检查器,原本为匈牙利语设计. Hunspell是一个自由软件,在GPL.LGPL和MPL三许可证下发行. Hunspell对主要 ...
- centos6.5 MySQL数据库的安装
<div id="home"><div id="header"> <div id="blogTitle"> ...
- GO语言从入门到放弃目录
GO语言基础 第一个GO程序 GO语言常量和变量 GO语言数据类型 GO语言流程控制 GO语言数组 GO语言切片 GO语言 map GO语言函数 GO语言指针 Go语言接口 GO语言常用包 GO语言的 ...
- docker-images(镜像)
一.获取镜像 docker search NAME 搜索引擎查找镜像 docker pull NAME:<TAG> 拉去镜像 NAME:表示镜像名称/镜像仓库的名称 TAG: 表示镜像的 ...
- flutter- 圆角
单个圆角变化 Container( height: 200, decoration: BoxDecoration( color: Colors.green, borderRadius: BorderR ...