js-classList修改class属性
classList定义与用法
1)classList属性返回元素的类名,作为DOMTokenList对象
2)该属性用于在元素中添加,移除及切换css类
3)classList属性是只读的,但可以用add()和remove()方法修改他。
方法:
1.添加class属性--add()
方法:add(class1,class2,...)
描述:1.在元素中添加一个或多个类名;2.如果指定的类名已存在,则不会添加
1).增加一个class
document.getElementById("p").classList.add("p-a-0");
----<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>
2).增加多个class
document.getElementById("p").classList.add("p-a-0","p-a-1","p-a-2" );
----<p id="p" class="p1 addp1 p-a-0 p-a-1 p-a-2">白色的范畴你傻逼</p>
2.删除class="addp1"--remove()
方法:remove(class1,class2,...)
描述:移除一个或多个class(移除不存在的class,不报错)
1).移除一个class
document.getElementById("p").classList.remove("addp1");
----<p id="p" class="p1">白色的范畴你傻逼</p>
2).移除多个class
document.getElementById("p").classList.remove("addp1",“p1”);
----<p id="p">白色的范畴你傻逼</p>
3.在元素中切换类名---toggle()
方法:toggle(class,true/false)
描述:在元素中切换类名。
第一个参数为要在元素中添加类名,并返回false。如果该类名不存在则会在元素中添加类名,并返回true.
第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。列如:
移除一个class: element.classList.toggle("classToRemove",false)
添加一个class: element.classList.toggle("classToRemove",true)
注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。
1). document.getElementById("p").classList.toggle("newClassName");
4.实例:获取元素的类名
<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;
返回结果:x----mystyle anotherClass thirdClass
5.判断元素是否存在某个class---contains()
方法:contains(class)
描述:返回布尔值,判断指定的类名是否存在。
true:元素已经包含了该类
false:元素中不存在该类
1)实例:查看元素是否存在 "mystyle" 类:
<div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>
var x = document.getElementById("myDIV").classList.contains("mystyle");
----返回结果x---true
6.返回类名在元素中的索引值。索引值从0开始---item()
方法:item(index)
描述:如果索引值在区间范围外则返回 null
1).实例:获取 <div> 元素的第一个类名(索引为0):
<div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>
----var x = document.getElementById("myDIV").classList.item(0);
----返回结果x---mystyle
属性:
1.查看类名的个数--length
属性:length
描述:返回类列表中类的数量(只读)
1.<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>
----document.getElementById("p").classList.length
----返回答案:
最新文章
- php获取excel所有的批注
- Liunx下的系统负荷
- js 小工具-- 按长度截取字符串
- spring mvc 工作流程
- Uart的Verilog建模
- QT之实现程序启动画面
- hdu 3342 Legal or Not(拓扑排序) HDOJ Monthly Contest – 2010.03.06
- 微服务架构下分布式Session管理
- GitCam一款Gif动画制作软件
- 解决nginx上传模块nginx_upload_module传递GET参数
- nmap工具简介
- C# Note26: [MethodImpl(MethodImplOptions.Synchronized)]与lock机制
- 对称加密----AES和DES加密、解密
- [转载]win7休眠后网络断开怎么办?如何设置?
- BZOJ2223/3524:[POI2014] Couriers(主席树)
- 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度
- [ python ] FTP作业进阶
- javaweb带父标签的自定义标签
- scss-@media
- k8s的service
热门文章
- Unity基础-编辑器
- 2018 Python开发者大调查:Python和JavaScript最配?
- redis列表,字典,管道,vue安装,创建项目
- navicat12.0.24破解方法,简单易操作,亲测可行
- arm的开发工具
- CodeForce:732B-Cormen — The Best Friend Of a Man
- HDU:4185-Oil Skimming
- POJ:1328-Radar Installation
- selenium2 页面对象模型Page Object
- #ifndef、#def、#endif说明