登录  /  注册
首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-10-16 11:13:23
原创
2308人浏览过

这篇文章主要介绍了详解使用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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号