首页 > 其他分享 >【CSS】动态DOM节点的classList属性

【CSS】动态DOM节点的classList属性

时间:2022-11-18 23:11:39浏览次数:53  
标签:DOM classList 元素 添加 CSS 移除 class 类名

动态DOM节点的classList属性

为 div元素动态添加 class: element.classList

定义和用法

classList 属性返回元素的类名,作为 DOMTokenList 对象。

该属性用于在元素中添加,移除及切换 CSS 类。

classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

document.getElementById("myDIV").classList.add("mystyle");

方法 描述
add(class1, class2, ...) 在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在。可能值:true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index) 返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...) 移除元素中一个或多个类名。注意: 移除不存在的类名,不会报错。
toggle(class, true 或false) 在元素中切换类名。第一个参数为要在元素中移除的类名,并返回false。如果该类名不存在则会在元素中添加类名,并返回 true。第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:移除一个 class: element.classList.toggle("classToRemove", false);添加一个 class: element.classList.toggle("classToAdd", true);注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。
length 返回类的数量

标签:DOM,classList,元素,添加,CSS,移除,class,类名
From: https://www.cnblogs.com/wanglei1900/p/16905219.html

相关文章

  • CSS渐变样色的字
    width:118px;height:17px;font-size:13px;font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;font-weight:bold;color:#FFFFFF;line-height:17px;background......
  • Css选择器-餐厅练习
    网站:https://flukeout.github.io/题目不懂可百度翻译,答案参考如下:1A2A3#id4AB5#idA6.classname7A.className8Putyourbackintoit!9A,B10*1......
  • 02_虚拟DOM的两种创建方式
      一、1_使用jsx创建虚拟DOM<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>1_使用jsx创建虚拟DOM</title></head><body><......
  • 【java开发系列】—— JDOM创建、修改、删除、读取XML文件
    有很多中操作XML文件的方法,这里介绍一下JDOM的使用方法和技巧。 JDOM下载地址创建XML文档XML文件是一种典型的树形文件,每个文档元素都是一个document元素的子节点。......
  • React源码中的dom-diff
    这一章就来讲讲React在协调阶段的beginWork里面主要做的事情--domdiff。本文主要讲的是React17.0.2版本的diff,在此我也画了一个简单的流程图:reconcileChildrendomd......
  • DOM简单学习以及事件简单学习
    DOM简单学习功能:控制html文档的内容代码:获取页面标签(元素)对象 Elementdocument.getElementById("id值"):通过元素的id获取元素对象操作Element对象:1.修改......
  • 在 Vue 中获取 DOM 元素
    一、获取DOM元素。1、在template中标识元素ref="xxx"。2、通过this.$refs.xxx获取元素。3、在组件内通过this.$el可以获取整个组件的DOM。<div><butto......
  • vulnhub靶场DomDom
    0x000靶场描述你对PHP程序的理解程度如何?您对Linux错误配置有多熟悉?此图像将涵盖高级Web攻击、开箱即用的思维和最新的安全漏洞。此靶场没有flag,获取到root权限即......
  • WEB安全DIV+CSS基础
    0x001DIV+CSS介绍层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机......
  • NSSCTF-SWPUCTF2021新生赛之fakerandom
    Day1NSSCTF[SWPUCTF2021新生赛]fakerandom下载源件之后是一个py文件,打开后源码如下随后看到了一个随机数种子,关于随机数种子的知识我了解的不多,只在学校的石头剪刀......