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


Posted in HTML / CSS onOctober 13, 2017

前言

以前我们有需要用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>点击按钮为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");

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 #HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 #HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 #HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 #HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 #HTML / CSS
详解HTML5新增标签
Nov 27 #HTML / CSS
You might like
基于xcache的配置与使用详解
2013/06/18 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JS实现的A*寻路算法详解
2018/12/14 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python字符串常用方法
2018/06/14 Python
python实现QQ批量登录功能
2019/06/19 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python map比for循环快在哪
2020/09/21 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
终端业务员岗位职责
2013/11/27 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android