ClassList属性

1.ClassList属性有以下几种方法:

(1)通过ClassList可以获取元素的全部类名;

(2)通过ClassList.remove()可以删除元素的一个或多个类名;

(3)通过ClassList.add()可以向元素添加一个或多个类名;

(4)通过ClassList.lentgh可以获取到元素类名的数量;

(5)通过ClassList.item(x)可以获取到元素类名索引为x的类名;

(6)通过ClassList.toggle可以为元素切换类;

(7)通过ClassList.contains(x)查看元素是否存在类名为"x"的类;

下面通过一个例子看看如何使用

先给予它一些基本样式

通过ClassList获取元素的全部类名;

通过ClassList.remove()删除元素的一个或多个类名;

通过ClassList.add()向元素添加一个或多个类名;

通过ClassList.lentgh获取到元素类名的数量;

通过ClassList.item(x)取到元素类名索引为x的类名;

通过ClassList.toggle为元素切换类,将它放在点击事件中若检测到没有color类就添加，若检测到有color类就删除

通过ClassList.contains(x)查看元素是否存在类名为"color"的类，有返回true

ClassList属性相关推荐

脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
文章目录知识储备 1.正则表达式 2.Syntax上需要注意的问题 3.属于多个类的情况下,样式的覆盖情况方法一:改变内联样式方法二: `classList`属性配合`add()`.`remov ...
classList属性的知识点整理
classLIst属性返回元素的类名,作为DOMTokenList对象该属性用于在元素中添加.移出.切换css类语法:elem.classList 方法: add( String[,String] ...
JavaScript classList() 属性和方法解释
classList属性是 HTML 元素的一个属性,它保存当前选定元素的类名.您可以使用该属性将 HTML 元素的类名作为数组获取. 例如,假设您的<body>标签中有以下 HTML 元素 ...
classList属性和className的区别
className的不方便之处: 在操作类名时,需要通过className属性添加,删除和替换类名.因为className中是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值.( ...
vue学习笔记（3):classList 属性
立即学习:https://edu.csdn.net/course/play/29544/421430?utm_source=blogtoedu classList 属性返回元素类名. 该属性用于在元素 ...
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
1. 什么是DOM: Document Object Modei :文档对象模型 2.DOM核心:document对象 3.DOM作用: 可以访问和操作xtml和HTML文档中的标签,标签的属性, ...
JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
html5 list css,使用HTML5的classList属性操做CSS类
前言之前咱们有须要用js或jquery的一些方法hasClass.addClass.removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但仍是稍微麻烦了 ...

ClassList属性

ClassList属性相关推荐

最新文章

热门文章