使用HTML5的classList可以像jQuery一样去操作DOM节点的CSS类

分手后的思念是犯贱 2022-10-29 06:27 156阅读 0赞

**① 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。**

**② 使用classList，我们还可以用它来判断某个节点是否被赋予了某个CSS类。**

**③ Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。**

**④ 相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。**

*  `新增CSS类`

**使用add方法，你可以往页面元素是新增一个或多个css类：**

myDiv.classList.add('myClass');
    myDiv.classList.add('myClass1'， 'myClass2', ...);

*  `删除一个CSS类`

**使用remove方法，你可以删除单个CSS类：**

myDiv.classList.remove('myClass1');
    myDiv.classList.remove('myClass1', 'myClass2', ...);

你可以在这个方法里一次传入多个类名，用空格分开，但执行的结果很有可能不是你预期的。

*  `反转CSS类的有无`

myDiv.classList.toggle('myClass'); //现在是增加
    myDiv.classList.toggle('myClass'); //现在是删除

当myDiv元素上没有这个CSS类时，它就新增这个CSS类；  
反之，如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。

*  `替换某个类`

div.classList.replace("myClass1", "myClass2");

该方法两个参数，第二个把第一个替换掉。

*  `检查是否含有某个CSS类`

myDiv.classList.contains('myClass');  //returns true or false

> 目前，几乎所有的现代浏览器(谷歌浏览器，火狐浏览器（Firefox 26 以下的版本并未实现 add/remove/toggle方法中的所有参数）等)都支持这个classList类，所以，相信新型的javaScript类库里都会使用classList类来操作页面CSS类，而不需像以前一样去分析元素节点的class属性！

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM 节点元素操作

一，判断属性 hasAttribute(‘属性名’) ：判断是否有某个属性 //3,判断属性是否存在 console.log(h1.hasAttri...

悠悠/ 2024年04月19日 10:47/ 0 赞/ 85 阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 84 阅读

相关 jQuery操作dom节点empty()方法

jQuery操作dom节点empty()方法 jQuery作为一个写的少，做的多的库，可以简化JavaScript的操作，例如想要清空dom节点清空元素的内容，而不

心已赠人/ 2024年03月16日 09:54/ 0 赞/ 70 阅读

相关使用HTML5的classList可以像jQuery一样去操作DOM节点的CSS类

① 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。 ② 使用classList，我

分手后的思念是犯贱/ 2022年10月29日 06:27/ 0 赞/ 157 阅读

相关 classList详解，让你的js方便地操作DOM类

在此之前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在

我会带着你远行/ 2022年08月19日 13:17/ 0 赞/ 252 阅读

相关 html5-Dom操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2022年07月14日 00:41/ 0 赞/ 167 阅读

相关 jQuery操作dom节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年06月02日 11:55/ 0 赞/ 319 阅读

相关 HTML-使用jQuery操作 DOM

DOM操作分为三类： 1. DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() 2. HTML-DOM：用于处理HTML文

电玩女神/ 2022年05月12日 08:30/ 0 赞/ 220 阅读

相关 DOM classList 属性

<table> <tbody> <tr> <th>方法</th> <th>描述</th> </tr> <tr> <td>add(<

╰+攻爆jí腚メ/ 2022年05月09日 11:22/ 0 赞/ 228 阅读

相关 HTML5-Classlist样式操作

[HTML5-Classlist样式操作][HTML5-Classlist] <!DOCTYPE html> <html lang="en"> <he

Bertha 。/ 2021年10月29日 17:42/ 0 赞/ 290 阅读