200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > JS基础篇--HTML DOM classList 属性

JS基础篇--HTML DOM classList 属性

时间:2021-06-16 05:30:48

相关推荐

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; } }; } }); }

这儿提示一下,其他类型值转换成布尔值的对应关系,对应关系表如下所示:

想要了解Object.defineProperty可以参考如下两篇文章:

《JS基础篇--JS apply的巧妙用法以及扩展到Object.defineProperty的使用》

《JS基础篇--JS中的可枚举属性与不可枚举属性以及扩展》

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。