你未必熟悉的 Web API - Element.classList

Neilyo 发布于2019-08-23 18:19 / 1505人阅读

摘要：删除任意数量的类名，若类名不存在，也不会抛出异常。起始根据索引返回相应的类名。起始输出用新的类名替换指定的类名。起始兼容性及以下不支持

介绍

可以用来替代以 element.className 访问和操作 CSS 类名的方式

返回元素 class 属性的 DOMTokenList，本身只读，但是可以通过自身的 add / remove 等方法修改元素的 class 属性

若元素的 class 属性未设置或者为空，则 classList.length 为 0

用法 add( String [, String [, ...]] )

添加任意数量的类名，若类名已存在则会被忽略。

const div = document.createElement("div");
const cls = ["foo", "bar"];

div.className = "foo"; // "foo"
div.classList.add(...cls); // "foo bar"
div.classList.add("bar baz"); // "foo bar baz"

remove( String [, String [, ...]] )

删除任意数量的类名，若类名不存在，也不会抛出异常。

// 起始："foo bar baz"
div.classList.remove("foo"); // "bar baz"

item( Number )

根据索引返回相应的类名。

// 起始："bar baz"
console.log(div.classList.item(1)); // 输出："baz"

toggle( String [, force] )

当只有一个参数时：

若类名已存在，则删除指定的类名并返回 false

若类名不存在，则添加指定的类名并返回 true

当有两个参数时：

若第二个参数的值为 true，则添加指定的类名

若第二个参数的值为 false，则删除指定的类名

// 起始："bar baz"
div.classList.toggle("foo"); // "foo bar baz"
div.classList.toggle("foo"); // "bar baz"
div.classList.toggle("foo", 2 < 1 ); // "bar baz"

contains( String )

检查指定的类名是否存在。

// 起始："bar baz"
console.log(div.classList.contains("foo")); // 输出：false

replace( oldClass, newClass )

用新的类名替换指定的类名。

// 起始："bar baz"
div.classList.replace("bar", "foo");  // "foo baz"

兼容性

IE 9 及以下不支持

服务器托管超融合服务器熟悉linux的操作熟悉linux的使用熟悉linux的应用你理解的html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105031.html

你未必熟悉的 Web API - Element.classList

摘要：删除任意数量的类名，若类名不存在，也不会抛出异常。起始根据索引返回相应的类名。起始输出用新的类名替换指定的类名。起始兼容性及以下不支持介绍可以用来替代以 element.className 访问和操作 CSS 类名的方式返回元素 class 属性的 DOMTokenList，本身只读，但是可以通过自身的 add / remove 等方法修改元素的 class 属性若元素的 c...

cartoon 2019-08-02 15:23 评论0 收藏0
你可能不知道的10个HTML5新功能

摘要：虽然不是一个特别大的功能，但绝对是一个有用的接口。花几分钟试试这些新功能，看看你能用它们实现什么样的效果本文合并了你不知道的个新功能和你不知道的个新功能第二辑 Element.classList classList API提供了我们多年来一种使用JavaScript工具库来实现的控制CSS的基本功能： // 增加一个CSS类 myElement.classList.add(newC...

since1986 2019-08-02 18:10 评论0 收藏0
如何形成一个完整的HTML对象

摘要：定义是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。重点分割线只有通过上面的继承关系，我们得到的元素才是一个完整的对象，我们才能为它设置获取属性绑定事件添加样式类等操作。写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。为何写这篇文章？你可能做Web开发已经有一段时间，...

freewolf 2019-08-23 10:28 评论0 收藏0
如何形成一个完整的HTML对象

摘要：定义是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。重点分割线只有通过上面的继承关系，我们得到的元素才是一个完整的对象，我们才能为它设置获取属性绑定事件添加样式类等操作。写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。为何写这篇文章？你可能做Web开发已经有一段时间，...

WalkerXu 2019-08-05 14:33 评论0 收藏0
前端面试知识点集锦

摘要：个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。如果需要进行深入了解可以根据知识点查询相关的技术文章。个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文...

iKcamp 2019-08-30 12:58 评论0 收藏0