详解使用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实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python读取word文档的方法
2015/05/09 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python异步存储数据详解
2019/03/19 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python如何建立全零数组
2020/07/19 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
计算机个人求职信范例
2014/01/24 职场文书
销售冠军获奖感言
2014/02/03 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers