如何使用HTML5的classList属性操作CSS类

2023-06-09 21:06:27 742人浏览八月长安

摘要

这篇“如何使用HTML5的classList属性操作CSS类”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何使用html5的classList属性操作CSS类”，小编整理了以下知识点，请大家

这篇“如何使用HTML5的classList属性操作CSS类”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何使用html5的classList属性操作CSS类”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

注意

classList兼容性有些差，不兼容ie10以下的ie浏览器。

示例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>classList</title>    <style>        .mystyle {            width: 300px;            height: 50px;            background-color: red;            color: white;            font-size: 25px;        }    </style></head><body><p>点击按钮为DIV元素添加 "mystyle" 类。</p><button onclick="myFunction()">点我</button><div id="myDIV">    我是一个 DIV 元素。</div><script>    function myFunction() {        document.getElementById("myDIV").classList.add("mystyle");    }</script></body></html>

如何使用HTML5的classList属性操作CSS类

新增类

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

document.getElementById("myDIV").classList.add("mystyle");

删除一个类

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

document.getElementById("myDIV").classList.remove("mystyle");

在元素中切换类名

在元素中切换类名。使用toggle方法,语法：toggle(class, true|false)

第一个参数为要在元素中移除的类名，并返回 false。

如果该类名不存在则会在元素中添加类名，并返回 true。

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

移除一个

document.getElementById("myDIV").classList.toggle("classToRemove", false);

添加一个

 document.getElementById("myDIV").classList.toggle("classToAdd", true);

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

检查是否含有某个类

使用contains方法，判断某个类是否存在，返回布尔值。

 //returns true or false document.getElementById("myDIV").classList.contains("myDIV");

以上是“如何使用HTML5的classList属性操作CSS类”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用HTML5的classList属性操作CSS类

本文链接: https://www.lsjlt.com/news/257960.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

C++ 生态系统中流行库和框架的贡献指南

作为 c++++ 开发人员，通过遵循以下步骤即可为流行库和框架做出贡献：选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支，实现修复并添加测试。提交...

99+

2024-05-15

框架 c++ 流行库 git
C++ 生态系统中流行库和框架的社区支持情况

c++++生态系统中流行库和框架的社区支持情况：boost：活跃的社区提供广泛的文档、教程和讨论区，确保持续的维护和更新。qt：庞大的社区提供丰富的文档、示例和论坛，积极参与开发和维护。...

99+

2024-05-15

生态系统社区支持 c++ overflow 标准库
c++中if elseif使用规则

c++ 中 if-else if 语句的使用规则为：语法：if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...

99+

2024-05-15

c++
c++中的继承怎么写

继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中，继承类型包括：单继承：一个子类从一个基类继承。多继承：一个子类从多个基类继承。层次继承：多个子类从同一个基类继承。多层...

99+

2024-05-15

c++
c++中如何使用类和对象掌握目标

在 c++ 中创建类和对象：使用 class 关键字定义类，包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括：公有、受保护和私有。数据成员是类的变量，每个对象拥有自己的副本...

99+

2024-05-15

c++
c++中优先级是什么意思

c++ 中的优先级规则：优先级高的操作符先执行，相同优先级的从左到右执行，括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表，其中赋值运算符具有最低优先级。通过了解优先级，可...

99+

2024-05-15

c++
c++中a+是什么意思

c++ 中的 a+ 运算符表示自增运算符，用于将变量递增 1 并将结果存储在同一变量中。语法为 a++，用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用，后者在表达式求值后递...

99+

2024-05-15

c++
c++中a.b什么意思

c++kquote>“a.b”表示对象“a”的成员“b”，用于访问对象成员，可用“对象名.成员名”的语法。它还可以用于访问嵌套成员，如“对象名.嵌套成员名.成员名”的语法。 c++...

99+

2024-05-15

c++
C++ 并发编程库的优缺点

c++++ 提供了多种并发编程库，满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大；异步库 (std::async) 可异步执行任务，但 api 复杂；协程库 ...

99+

2024-05-15

c++ 并发编程
如何在 Golang 中备份数据库？

在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包，或第三方包如 github.com/go-sql-driver/mysql。具体步骤...

99+

2024-05-15

golang 数据库备份 mysql git 标准库