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
----返回答案:
js-classList修改class属性的更多相关文章
- js循环修改数组属性key值
var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...
- js内置构造函数属性修改问题
在学习js原型时遇到一个问题,Array,Object等内置构造函数部分属性无法修改,我猜测可能是因为浏览器实现的原因造成的. 1.修改name属性无效. <script type=" ...
- 2.23 js处理日历控件(修改readonly属性)
2.23 js处理日历控件(修改readonly属性) 前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...
- js 修改css属性值
js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面 ...
- 使用原生JS 修改 DIV 属性
本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...
- 昆仑游戏[JS加密修改]
昆仑游戏:http://www.kunlun.com/index.html JS加密修改 BigTools=window.BigTools;//重点 RSAKeyPair=window.RSAKeyP ...
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
- [Effective JavaScript 笔记]第32条:始终不要修改__proto__属性
__proto__属性很特殊,它提供了Object.getPrototypeOf方法所不具备的额外能力,即修改对象原型链接的能力. 避免修改__proto__属性的最明显的原因是可移植性的问题.并不是 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- 修改html 属性,css样式。
一 通过修改标签属性来改变它的样式 js设置和获取标签的属性 <script type="text/javascript"> window.onload = func ...
随机推荐
- ubuntu下RedisDesktopManager的安装,redis可视化工具
官方网站:https://redisdesktop.com/download 一句命令行解决: sudo snap install redis-desktop-manager 或者直接通过软件管理中心 ...
- day2-python 登录
# username = 'niuhanyang' # 写一个判断登录的程序: # 输入: username # password # 最大错误次数是3次,输入3次都没有登录成功,提示错误次数达到上限 ...
- Python基础——字符串操作
运算符 加(+) str2="hello"+"python" print(str2) 乘(*) str1="hello python" ...
- C与C++接口相互调用
转载于:http://blog.csdn.net/lincoln_2012/article/details/50801080 项目中经常使用C和C++混合编程,那么,在调用对方接口时,总是不可避免地出 ...
- 水题:UVa213- Message Decoding
Message Decoding Some message encoding schemes require that an encoded message be sent in two parts. ...
- canvas 动画库 CreateJs 之 EaselJS(上篇)
本文来自网易云社区 作者:田亚楠 须知 本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
- python - work5 - 类与对象
# -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: work_20181119.py@ide: PyCharm Communit ...
- linux dd命令创建一定大小的文件
http://www.cnblogs.com/jikexianfeng/p/6103500.html
- Farey sequences
n阶的法里数列是0和1之间最简分数的数列,由小至大排列,每个分数的分母不大于n. Stern-Brocot树(SB Tree)可以生成这个序列 {0/1,1/1} {0/1,1/2,1/1} {0/1 ...
- php_strip_whitespace和trim的搭配使用
在学习kongphp框架时有这么一段代码是为了生成运行时文件的 $runfile = RUNTIME_PATH.'_runtime.php'; if(!is_file($runfile)) { $s ...