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 ...
随机推荐
- KeepAlived+HaProxy+MyCat+Percona双机热备PXC集群
一.搭建PXC集群 1.环境:centos7+PXC5.7.21+mycat1.6.5 2.卸载mariadb rpm -qa | grep mariadb* yum -y remove mariad ...
- [转载来之雨松：NGUI研究院之为什么打开界面太慢（十三）]
本文固定链接: http://www.xuanyusong.com/archives/2799
- linux关机（重启）命令
Linux系统关机命令: #关机命令 1.halt 2.poweroff 3.shutdown -h now 立即关机(具有root权限用户使用)#重启命令 1.reboot 2.shutdown - ...
- C#导出文本内容到word文档源码
将做工程过程中较好的代码片段珍藏起来,下面的代码内容是关于C#导出文本内容到word文档的代码,希望能对小伙伴们也有好处.<%@ Page Language="C#" Aut ...
- spark-jobserver安装实践 （centos7.4）
spark-jobserver 提供了一个RESTful接口来提交和管理spark的jobs,jars和job contexts. 该工程位于:https://github.com/spark-job ...
- 虚拟蜜罐honeyd安装使用
转https://blog.csdn.net/jack237/article/details/6828771
- JS动态添加行列
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add-Delete Row.a ...
- lnmp一键安装包安装失败，或者安装下载缓慢的解决办法
使用阿里云内网安装模块 阿里云外网: ftp://soft6.vpser.net/ 阿里云云内网:ftp://10.163.196.147 修改lnmp.conf 文件 目前可用的国内LNMP ful ...
- 分布式事务、多数据源、分库分表中间件之spring boot基于Atomikos+XADataSource分布式事务配置（100%纯动态）
本文描述spring boot基于Atomikos+DruidXADataSource分布式事务配置(100%纯动态),也就是增加.减少数据源只需要修改application.properties文件 ...
- node全局安装说明（create-react-app、）
1.使用 create-react-app 快速构建 React 开发环境 国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ np ...