js-classList添加class属性

Posted 2020-10-12 YAZI

classList定义与用法

1）classList属性返回元素的类名，作为DOMTokenList对象

2）该属性用于在元素中添加，移除及切换css类

3）classList属性是只读的，但可以用add()和remove()方法修改他。

 

方法：

1.添加class属性--add()

方法：add（class1,class2,...）

描述：1.在元素中添加一个或多个类名；2.如果指定的类名已存在，则不会添加

1）.增加一个class

   document.getElementById("p").classList.add("p-a-0");

   ----<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>

2）.增加多个class

   document.getElementById("p").classList.add("p-a-0","p-a-1","p-a-2" );

   ----<p id="p" class="p1 addp1 p-a-0 p-a-1 p-a-2">白色的范畴你傻逼</p>

 

2.删除class="addp1"--remove()

方法：remove(class1,class2,...)

描述：移除一个或多个class(移除不存在的class,不报错)

1）.移除一个class

      document.getElementById("p").classList.remove("addp1");

     ----<p id="p" class="p1">白色的范畴你傻逼</p>

2）.移除多个class

      document.getElementById("p").classList.remove("addp1"，“p1”);

     ----<p id="p">白色的范畴你傻逼</p>

 

3.在元素中切换类名---toggle()

方法：toggle(class,true/false)

描述：在元素中切换类名。

           第一个参数为要在元素中添加类名，并返回false。如果该类名不存在则会在元素中添加类名，并返回true.

           第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。列如：

移除一个class:    element.classList.toggle("classToRemove",false)

添加一个class:    element.classList.toggle("classToRemove",true) 

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。           

 1). document.getElementById("p").classList.toggle("newClassName");         

 

4.实例：获取元素的类名

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

 

返回结果：x----mystyle anotherClass thirdClass

 

5.判断元素是否存在某个class---contains()

方法：contains(class)

描述：返回布尔值，判断指定的类名是否存在。

           true:元素已经包含了该类

           false:元素中不存在该类

1）实例：查看元素是否存在 "mystyle" 类:

      <div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>

       var x = document.getElementById("myDIV").classList.contains("mystyle");

       ----返回结果x---true

 

6.返回类名在元素中的索引值。索引值从0开始---item()

方法：item(index)

描述：如果索引值在区间范围外则返回 null

1）.实例：获取 <div> 元素的第一个类名（索引为0）:

 <div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>

  ----var x = document.getElementById("myDIV").classList.item(0);

  ----返回结果x---mystyle 

 

属性：

1.查看类名的个数--length

属性：length

描述：返回类列表中类的数量（只读）

1.<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>

   ----document.getElementById("p").classList.length

   ----返回答案：3