JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
添加类(add)
document.getElementById("myDIV").classList.add("mystyle");
为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
移除类(remove)
使用remove方法,你可以删除单个CSS类:
document.getElementById("myDIV").classList.remove("mystyle");
移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
切换类(toggle)
这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。
document.getElementById("myDIV").classList.toggle("newClassName");myDiv.classList.toggle('myCssClass'); //现在是增加
myDiv.classList.toggle('myCssClass'); //现在是删除
是否存在类(contains)
检查是否含有某个CSS类:
var x = document.getElementById("myDIV").classList.contains("mystyle");
结果是true
或者false
。
length属性
返回类列表中类的数量。
查看 <div> 元素有多少个类名:
var x = document.getElementById("myDIV").classList.length; //3
获取获取 <div> 元素的所有类名:
<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>var x = document.getElementById("myDIV").classList;
item(index)
返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
获取 <div> 元素的第一个类名(索引为0):
var x = document.getElementById("myDIV").classList.item(0); //mystyle
浏览器支持
但是IE9和IE9以前的版本不支持该属性,下面这个代码可以弥补这个遗憾:(来自网友代码)
if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function() { var self = this; function update(fn) { return function(value) { var classes = self.className.split(/\s+/g), index = classes.indexOf(value); fn(classes, index, value); self.className = classes.join(" "); } } return { add: update(function(classes, index, value) { if (!~index) classes.push(value); }), remove: update(function(classes, index) { if (~index) classes.splice(index, 1); }), toggle: update(function(classes, index, value) { if (~index) classes.splice(index, 1); else classes.push(value); }), contains: function(value) { return !!~self.className.split(/\s+/g).indexOf(value); }, item: function(i) { return self.className.split(/\s+/g)[i] || null; } }; } });
}
这儿提示一下,其他类型值转换成布尔值的对应关系,对应关系表如下所示:
其他类型值 | 转换成的布尔值 |
---|---|
undefined
|
false
|
null
|
false
|
布尔值 | 不用转换 |
数字 |
0,NaN 转化成false ,其他数字类型转换成true
|
字符串 |
只有空字符串'' 转换成false ,其他都转换成true
|
对象 |
全部转换为true
|
想要了解Object.defineProperty可以参考如下两篇文章:
《JS基础篇--JS apply的巧妙用法以及扩展到Object.defineProperty的使用》
《JS基础篇--JS中的可枚举属性与不可枚举属性以及扩展》
JS基础篇--HTML DOM classList 属性相关推荐
- ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇(二)JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
- 前端面试题汇总(JS 基础篇)
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...
- cytoscape.js基础篇
cytoscape.js基础篇 cytoscape.js 包引用 版本信息 Citation Funding 基础篇 cytoscape.js变量描述 位置 Elements JSON 节点属性说明 ...
- (一)JS 基础篇—基础知识总结
⛺️ 欢迎大家拜访我的:个人博客 ⛽️ 前端加油站之[JavaScript]⛽️ 内容 地址 (一)JS 基础篇-基础知识总结 ⛳️ [快来点点我 ~] (二)JS 基础篇-函数与作用域 ⛳️ [快来 ...
- html判断是否有某个元素,JS基础篇--如何用JavaScript判断dom是否有存在某class的值?...
例如: 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.01更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 前端面试题目汇总摘录(JS 基础篇)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 前端工程化----Node.js基础篇
文章目录 1.认识Node.js Node.js是什么 Node.js应用场景 2.Node.js安装和版本管理 Node.js安装 Node.js版本工具 3.Node.js执行文件 4.Node. ...
- 前端学习笔记(CSS、JS基础篇)
CSS篇 注意:css注释使用/ /,而不是<!-- -->或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
最新文章
- python3语音识别模块_语音识别(LSTM+CTC)
- word2vec python实现_教程 | 在Python和TensorFlow上构建Word2Vec词嵌入模型
- 系统测试和集成测试的区别
- Android中的基础控件TextView、Button、ImageView、EditText、ProgressBar
- redis介绍以及使用 ppt_光纤收发器的工作原理以及使用方法介绍
- 全球首届“AI球球大作战:Go-Bigger多智能体决策智能挑战赛”开启
- OCFS2在Linux下配置文档
- 数据中台建设与应用_Gartner对于建设数据中台的建议
- python3.8.0安装_Python3.8.0
- 在服务器上安装vasp如何得到输出文件,云服务器安装vasp
- jdk版本修改不生效
- mysql 锁怎么使用_MySQL锁的用法之行级锁
- access统计行数 vb_VB代码行数统计工具
- Python SQLite3 教程
- 文件保险柜 v2.6 官网
- 读书笔记:学习C语言必须读的第二本书
- Uniapp Android原生插件开发
- 紫书刷题记录:UVa1594,Ducci序列;
- 帝国时代2哪个服务器稳定,20年后的新生,经典永不落幕——《帝国时代2:决定版》体验报告...
- 四个技巧教你解决电磁干扰问题