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属性的更多相关文章

  1. js循环修改数组属性key值

    var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...

  2. js内置构造函数属性修改问题

    在学习js原型时遇到一个问题,Array,Object等内置构造函数部分属性无法修改,我猜测可能是因为浏览器实现的原因造成的. 1.修改name属性无效. <script type=" ...

  3. 2.23 js处理日历控件(修改readonly属性)

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  4. js 修改css属性值

    js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面 ...

  5. 使用原生JS 修改 DIV 属性

    本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...

  6. 昆仑游戏[JS加密修改]

    昆仑游戏:http://www.kunlun.com/index.html JS加密修改 BigTools=window.BigTools;//重点 RSAKeyPair=window.RSAKeyP ...

  7. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  8. [Effective JavaScript 笔记]第32条:始终不要修改__proto__属性

    __proto__属性很特殊,它提供了Object.getPrototypeOf方法所不具备的额外能力,即修改对象原型链接的能力. 避免修改__proto__属性的最明显的原因是可移植性的问题.并不是 ...

  9. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  10. 修改html 属性,css样式。

    一 通过修改标签属性来改变它的样式  js设置和获取标签的属性 <script type="text/javascript"> window.onload = func ...

随机推荐

  1. linux centos 下ssh的连接

    参考链接 虚拟机下CentOS7开启SSH连接 记录 我用finalssh连接virtualbox里的centos,发现报出java.net.UnknownHostException 一开始我以为是s ...

  2. [图文]RHEL 7/CentOS 7/Fedora28 联网初始化

    实验说明: 入门Linux,一般会遇到以下几个问题: 从哪里获取LInux镜像? 如何通过镜像文件安装Linux系统? 安装实体机还是虚拟机? 安装完系统如何配置网络? 虚拟机的网络配置与实体机有何不 ...

  3. hdu-1338 game predictions(贪心题)

    Suppose there are M people, including you, playing a special card game. At the beginning, each playe ...

  4. 算法学习记录-查找——二叉排序树(Binary Sort Tree)

    二叉排序树 也称为 二叉查找数. 它具有以下性质: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值. 若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值. 它的左.右子树也分别 ...

  5. mysql查询的语法

    单表查询语法 SELECT DISTINCT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条 ...

  6. css 透明度使用

    设置元素整体透明度: div{ opacity: 0.5; } 设置背景色透明度 div{ background: rgba(0,0,0,0.5); }

  7. 控制台窗口和powershell运行服务会卡住的解决办法

    之前使用nodejs做了一个简单的web服务,通过控制台窗口运行,通过浏览器访问发现有时候浏览器等很久数据都加载不出来,以为是代码有问题,后来发现是控制台卡住了,按一下enter键就好了,当时百度了一 ...

  8. loj2012 「SCOI2016」背单词

    -- #include <algorithm> #include <iostream> #include <cstring> #include <cstdio ...

  9. mysql update连表

    UPDATE price_air_item t1 LEFT JOIN order_item t2 ON t1.ORDER_ITEM_ID = t2.ORDER_ITEM_ID SET t1.BUYER ...

  10. python-网络编程-03

    首先我们可以看下可以最简单的交互性的服务端和客户端程序 server import socket def main(): sock = socket.socket(socket.AF_INET,soc ...