使用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>点击按钮为DIV元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">我是一个 DIV 元素。
</div>
<script>function myFunction() {document.getElementById("myDIV").classList.add("mystyle");}
</script></body>
</html>
新增类
使用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 falsedocument.getElementById("myDIV").classList.contains("myDIV");
使用HTML5的classList属性操作CSS类相关推荐
- 02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())
02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...
- 第88天:HTML5中使用classList操作css类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
- html5 list css,使用HTML5的classList属性操做CSS类
前言 之前咱们有须要用js或jquery的一些方法hasClass.addClass.removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但仍是稍微麻烦了 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- name如何css,如何根据父项的name属性更改css类
元素被封装在生成的代码中,所以我不能给它一个ID或其他任何东西. 我可以访问的唯一属性是包含我需要更改的元素的div(name ="OrganizationTypes"). 生成的 ...
- HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类
classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...
最新文章
- python使用箱图法和业务规则进行异常数据处理并检查预测使用的数据特征是否有字段缺失的情况并补齐
- 2019年「自然语言处理NLP」的“高光时刻” --- 28篇标志性论文
- android自定义滑块解锁,android 滑动解锁
- 精通python能干什么-Python学到什么程度才算精通?天津Python培训
- 初始html(常用标签)
- 1.odoo13之跟着官网做项目/实例(创建模块、创建模型类、配置角色安全权限文件)
- 基于Boost::beast模块的同步http服务器
- 南阳58--最小步数(BFS)
- uartz Spring与Spring Task总结
- Jenkins在Windows下的安装与配置
- 连接定义点作用_【干货】我的期货交易入场点分析
- 自动从mysql下载到onedrive_centos7 自动上传 transmission 下载完成的文件 到 onedrive脚本...
- 【鸿蒙】鸿蒙App应用-《记账软件》开发步骤
- 阿里云 Linux云服务器登陆方式(Windows远程登录工具XShell,基于ssh建立会话)
- Java随笔记 - 内核缓冲区与进程缓冲区
- 明日书苑|硬笔书法临写指南
- 39页大数据治理运营整体解决方案
- [NSSRound#8 Basic]MyDoor
- webpack出现CssSyntaxError
- SuperMap GIS BIM类型数据处理 QA