classList属性和className的区别

className的不方便之处：

在操作类名时，需要通过className属性添加，删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。（如下所示：）

但是！！！classList却极为方便！！！所以classList诞生了…

●classList属性：这个属性是新集合类型DOMTokenList的实例。其包含以下属性和方法：

->length->item（）（也可以用方括号语法）：取得每个元素->add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。->contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。->remove（）：从列表中删除给定的字符串。->toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

classList属性和className的区别相关推荐

JavaScript中classList属性和className的区别
className 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一共字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值. var a = ...
脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
文章目录知识储备 1.正则表达式 2.Syntax上需要注意的问题 3.属于多个类的情况下,样式的覆盖情况方法一:改变内联样式方法二: `classList`属性配合`add()`.`remov ...
JavaScript classList() 属性和方法解释
classList属性是 HTML 元素的一个属性,它保存当前选定元素的类名.您可以使用该属性将 HTML 元素的类名作为数组获取. 例如,假设您的<body>标签中有以下 HTML 元素 ...
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
1. 什么是DOM: Document Object Modei :文档对象模型 2.DOM核心:document对象 3.DOM作用: 可以访问和操作xtml和HTML文档中的标签,标签的属性, ...
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器
计算属性 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <!DOCTYPE html> <html lang=& ...
php计算属性集的闭包,关于swift：计算属性与带闭包的属性集之间的区别
我是Swift的新手. 计算属性和设置为闭包的属性之间有什么区别? 我知道每次都会重新计算一个计算属性. 封盖是否有所不同? 即关闭: var pushBehavior: UIPushBehavio ...
JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
[react] 为什么属性使用className而不是class呢？
[react] 为什么属性使用className而不是class呢? class是关键字 js会使用dom.className获取样式名,跟js保持一致个人简介我是歌谣,欢迎和大家一起交流前后端知 ...

classList属性和className的区别

classList属性和className的区别相关推荐

最新文章

热门文章