HTML5的classList属性操作CSS类的使用详解-H5教程-PHP中文网

HTML5的classList属性操作CSS类的使用详解

黄舟

发布： 2017-10-16 11:13:23

原创

2509 人浏览过

这篇文章主要介绍了详解使用HTML5的classList属性操作CSS类,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass，在一个元素的class属性上添加或者删除某几个类，达到某种样式变化的需求，但还是稍微麻烦了一些。
h5新增的classList可以让我们更方便的元素的类名进行操作。

注意

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>点击按钮为p元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<p id="myp">
    我是一个 p 元素。
</p>
<script>
    function myFunction() {
        document.getElementById("myp").classList.add("mystyle");
    }
</script>

</body>
</html>

登录后复制

新增类

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

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

登录后复制

删除一个类

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

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

登录后复制

在元素中切换类名

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

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

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

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

移除一个

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

登录后复制

添加一个

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

登录后复制

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

检查是否含有某个类

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

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

登录后复制

以上是HTML5的classList属性操作CSS类的使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

HTML5的classList属性操作CSS类的使用详解