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 ...
随机推荐
- linux centos 下ssh的连接
参考链接 虚拟机下CentOS7开启SSH连接 记录 我用finalssh连接virtualbox里的centos,发现报出java.net.UnknownHostException 一开始我以为是s ...
- [图文]RHEL 7/CentOS 7/Fedora28 联网初始化
实验说明: 入门Linux,一般会遇到以下几个问题: 从哪里获取LInux镜像? 如何通过镜像文件安装Linux系统? 安装实体机还是虚拟机? 安装完系统如何配置网络? 虚拟机的网络配置与实体机有何不 ...
- hdu-1338 game predictions(贪心题)
Suppose there are M people, including you, playing a special card game. At the beginning, each playe ...
- 算法学习记录-查找——二叉排序树(Binary Sort Tree)
二叉排序树 也称为 二叉查找数. 它具有以下性质: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值. 若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值. 它的左.右子树也分别 ...
- mysql查询的语法
单表查询语法 SELECT DISTINCT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条 ...
- css 透明度使用
设置元素整体透明度: div{ opacity: 0.5; } 设置背景色透明度 div{ background: rgba(0,0,0,0.5); }
- 控制台窗口和powershell运行服务会卡住的解决办法
之前使用nodejs做了一个简单的web服务,通过控制台窗口运行,通过浏览器访问发现有时候浏览器等很久数据都加载不出来,以为是代码有问题,后来发现是控制台卡住了,按一下enter键就好了,当时百度了一 ...
- loj2012 「SCOI2016」背单词
-- #include <algorithm> #include <iostream> #include <cstring> #include <cstdio ...
- mysql update连表
UPDATE price_air_item t1 LEFT JOIN order_item t2 ON t1.ORDER_ITEM_ID = t2.ORDER_ITEM_ID SET t1.BUYER ...
- python-网络编程-03
首先我们可以看下可以最简单的交互性的服务端和客户端程序 server import socket def main(): sock = socket.socket(socket.AF_INET,soc ...