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 ...
随机推荐
- Ajax原生代码
Ajax传数据有两种方式:get/post.下面是前台的get/post方式的代码. //------------原生--------- function AjaxGET(){ //第一步 调用Aja ...
- 一个form表单对应多个submit
一个form表单多个submit 在平时项目开发过程中,经常会遇到一个form表单对应多个submit提交的情况,那么 ,这种情况应该怎么解决呢,也很简单,这时候就不能用submit来提交了,可以通过 ...
- 微信JS-SDK 示例
微信JS-SDK 示例 1.html部分 <!DOCTYPE html> <!-- saved from url=(0028){sh:$selfUrl} --> <htm ...
- GoF23种设计模式之行为型模式之命令模式
一.概述 将一个请求封装为一个对象,从而可以使用不同的请求对客户端进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 二.适用性 1.当抽象出待执行的动作以参数化某个对象的时候. 2.当需要在 ...
- LeetCode(228) Summary Ranges
题目 Given a sorted integer array without duplicates, return the summary of its ranges. For example, g ...
- STM8时基单元
STM8时基单元 时基单元包含: 16位向上/向下计数器 16位自动重载寄存器 重复计数器 预分频器 (图29:STM8 时基单元) 16位计数器,预分频器,自动重载寄存器和重复计数器寄存器都可以通过 ...
- HDU 4565 So Easy! 矩阵快速幂
题意: 求\(S_n=\left \lceil (a+\sqrt{b})^n \right \rceil mod \, m\)的值. 分析: 设\((a+\sqrt{b})^n=A_n+B_n \sq ...
- mysql primary partition分区
尝试把数据库一个表分区 ALTER TABLE user PARTITION BY RANGE(TO_DAYS(`date`)) ( PARTITION p1004 VALUES LESS THAN ...
- Python面试题(练习二)
1.用Python实现一个二分查找的函数. data = [1, 3, 6, 7, 9, 12, 14, 16, 17, 18, 20, 21, 22, 23, 30, 32, 33, 35] def ...
- 【转载】用OCTAVE实现一元线性回归的梯度下降算法
原文地址:http://www.cnblogs.com/KID-XiaoYuan/p/7247481.html STEP1 PLOTTING THE DATA 在处理数据之前,我们通常要了解数据,对于 ...