详解使用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实现的几个小loading效果
Sep 27 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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
php 获取客户端的真实ip
2009/11/30 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
js常见表单应用技巧
2008/01/09 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python实现统计代码行数的方法
2015/05/22 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
公司领导推荐信
2013/11/12 职场文书
运动会获奖感言
2014/02/11 职场文书
项目经理聘任书
2014/03/29 职场文书
护士长竞聘书
2014/03/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
学校学期工作总结
2015/08/13 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript