详解使用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实现照片墙效果
Dec 26 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
HTML基础详解(上)
Oct 16 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 字符串长度判断效率更高的方法
2014/03/02 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
python如何去除字符串中不想要的字符
2020/07/05 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
专升本个人自我评价
2013/12/22 职场文书
租房协议书范本
2014/04/09 职场文书
协议书怎么写
2014/04/21 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Flask response响应的具体使用
2021/07/15 Python