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. Ajax原生代码

    Ajax传数据有两种方式:get/post.下面是前台的get/post方式的代码. //------------原生--------- function AjaxGET(){ //第一步 调用Aja ...

  2. 一个form表单对应多个submit

    一个form表单多个submit 在平时项目开发过程中,经常会遇到一个form表单对应多个submit提交的情况,那么 ,这种情况应该怎么解决呢,也很简单,这时候就不能用submit来提交了,可以通过 ...

  3. 微信JS-SDK 示例

    微信JS-SDK 示例 1.html部分 <!DOCTYPE html> <!-- saved from url=(0028){sh:$selfUrl} --> <htm ...

  4. GoF23种设计模式之行为型模式之命令模式

    一.概述 将一个请求封装为一个对象,从而可以使用不同的请求对客户端进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 二.适用性 1.当抽象出待执行的动作以参数化某个对象的时候. 2.当需要在 ...

  5. LeetCode(228) Summary Ranges

    题目 Given a sorted integer array without duplicates, return the summary of its ranges. For example, g ...

  6. STM8时基单元

    STM8时基单元 时基单元包含: 16位向上/向下计数器 16位自动重载寄存器 重复计数器 预分频器 (图29:STM8 时基单元) 16位计数器,预分频器,自动重载寄存器和重复计数器寄存器都可以通过 ...

  7. 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 ...

  8. mysql primary partition分区

    尝试把数据库一个表分区 ALTER TABLE user PARTITION BY RANGE(TO_DAYS(`date`)) ( PARTITION p1004 VALUES LESS THAN  ...

  9. Python面试题(练习二)

    1.用Python实现一个二分查找的函数. data = [1, 3, 6, 7, 9, 12, 14, 16, 17, 18, 20, 21, 22, 23, 30, 32, 33, 35] def ...

  10. 【转载】用OCTAVE实现一元线性回归的梯度下降算法

    原文地址:http://www.cnblogs.com/KID-XiaoYuan/p/7247481.html STEP1 PLOTTING THE DATA 在处理数据之前,我们通常要了解数据,对于 ...