HTML5 DOM元素类名添加操作API classList简介

2017-10-10 本文已影响0人 Coldhands

熟知且常用的两种给DOM元素添加类的操作就是原生js中的 className和jQuery中的addClass。
实际上classList已经出现很久，Firefox浏览器和Chrome浏览器都支持这个API；对于老油条IE，就仅仅对IE10以上的版本才能支持。手机端的话，发展至今，基本上除了老人机，一般都可以兼容。

classList API概要

举个栗子：

<body class="a b c">
    <script type="text/javascript">
        console.log(document.body.classList);
    </script>
</body>

浏览器控制台输出结果：

控制台输出结果

再看其直接暴露的API：

暴露的api

length属性，表示元素类名的个数。
item() 支持一个参数，为类名的索引，返回值为对应的类名，例如执行：
```
console.log(document.body.classList.item(0));
```
则返回：a
如若索引超出元素个数范围，例如：
```
console.log(document.body.classList.item(3));
```
则返回：null
add() 支持一个或多个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。例如：
```
<body class="a b c">
    <script type="text/javascript">
        console.log(document.body.classList.add('d'));
        console.log(document.body.classList);
    </script>
</body>
```
输出结果：
add()返回的是undefined

remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。例如：

<body class="a b c">
  <script type="text/javascript">
      console.log(document.body.classList.remove('b'));
      console.log(document.body.classList);
  </script>

输出结果：

remove()返回的是undefined

toggle() 支持一个类名字符串参数。若类名列表中有此类名，移除之，并返回false; 如果没有，则添加该类名，并返回true。

还有等等等等等就不逐一介绍了。

注：忘了说了，原本add() 只支持添加一个类名字符串参数，但是经过时代的变迁，add()如今可以支持添加多个类名字符串。例如：

<body class="a b c">
    <script type="text/javascript">
        document.body.classList.add('d','e','f');
        console.log(document.body.classList);
    </script>
</body>

输出结果：

当!当!!当!!!当!!!!

HTML5 DOM元素类名添加操作API classList简介

classList API概要

猜你喜欢

热点阅读