classList属性的知识点整理

比眉伴天荒 2022-05-20 21:13 207阅读 0赞

classLIst属性返回元素的类名，作为DOMTokenList对象

该属性用于在元素中添加、移出、切换css类

语法：elem.classList

方法：

add( String\[,String\])：添加指定的类值。如果这些类已经存在于元素的属性中，那么他们将被忽略

remove(String\[,String\])：删除指定的类值

item(Number)：按集合中的索引返回类值

toggle(String\[,force\])：

*  当只有一个参数的时，切换class value ，即如果类存在，删除它，并返回false，如果类不存在，则添加它并返回true。
 *  当存在第二个参数时，如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

contains(string)：检查元素的类属性中是否存在指定的类值

属性

length：返回类列表中类的数量，该属性是只读的

嗯、一例胜千言，看个小例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                width:100px; height:100px; border:1px solid #e15671;
            }
            .red{
                background:red;
            }
            .width{
                width:200px;
            }
            .height{
                height:300px;
            }
        </style>
    </head>
    <body>
    <div class="box">
    
    </div>
    </body>
    <script>
    var oBox = document.querySelector('.box');
    var list = oBox.classList;
    console.log(list.length);
    document.onclick = function(){
        list.add("red","width");
        list.toggle("height");
        console.log(list.length);
        list.toggle("width",list.length<4?true:false);
        oBox.innerHTML = list.item(2);
        console.log(list.contains("width"))
    }
    </script>
    </html>

代码复制过去，看看效果就很容易理解了，所以此处我就不再多说什么了，那这个是新添加的属性，兼容性肯定是要考虑的，请看下面：

下表中的数字，表示浏览器支持的第一个版本号

<table style="border:0px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr style="border-top:0px;"> 
   <th style="border-color:rgb(212,212,212);font-size:16px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;width:135.333px;">属性</th> 
   <th title="Chrome" style="border-color:rgb(212,212,212);font-size:13px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_chrome.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; Chrome</th> 
   <th title="Internet Explorer" style="border-color:rgb(212,212,212);font-size:13px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_ie.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IE</th> 
   <th title="Firefox" style="border-color:rgb(212,212,212);font-size:13px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_firefox.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; Firefox</th> 
   <th title="Safari" style="border-color:rgb(212,212,212);font-size:13px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_safari.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Safari</th> 
   <th title="Opera" style="border-color:rgb(212,212,212);font-size:13px;background-repeat:no-repeat;background-position:center;background-color:rgb(255,255,255);font-weight:normal;color:rgb(85,85,85);vertical-align:middle;background-image:url(&quot;/images/compatible_opera.gif&quot;);width:106px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Opera</th> 
  </tr> 
  <tr style="border-top:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);font-size:13px;vertical-align:top;min-width:25px;">classList</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;text-align:center;vertical-align:top;">8.0</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;text-align:center;vertical-align:top;">10.0</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;text-align:center;vertical-align:top;">3.6</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;text-align:center;vertical-align:top;">5.1</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;text-align:center;vertical-align:top;">11.5</td> 
  </tr> 
 </tbody> 
</table>