原生js实现查找/添加/删除/指定元素的class

yizhihongxing

实现查找指定元素的class可以使用Element.classList属性,该属性是一个只读的类数组对象,可以返回元素的所有class列表。同时,该属性还包含了一些常用的方法,可以用于添加、删除、切换、是否存在等操作。

查找指定元素的class

为了查找指定元素的class,可以使用如下代码:

let element = document.getElementById("my-element");
let classList = element.classList; 

以上代码获取了ID为"my-element"的元素,并获取了该元素的classList列表。在后续操作中,可以对该列表进行添加、删除和切换等操作。

添加元素的class

为了给元素添加class,可以使用如下代码:

let element = document.getElementById("my-element");
element.classList.add("my-class");

以上代码给ID为"my-element"的元素添加了一个名为"my-class"的class。如果该元素原本没有该class,则添加成功。如果该元素已经有该class,则不会有任何变化。

删除元素的class

为了删除元素的class,可以使用如下代码:

let element = document.getElementById("my-element");
element.classList.remove("my-class");

以上代码删除ID为"my-element"的元素的名为"my-class"的class。如果该元素本身没有该class,则删除操作不会有任何影响。

切换元素的class

为了切换元素的class,可以使用如下代码:

let element = document.getElementById("my-element");
element.classList.toggle("my-class");

以上代码将切换ID为"my-element"的元素的名为"my-class"的class。如果该元素原本没有该class,则添加该class;如果该元素原本有该class,则删除该class。

判断元素是否存在指定的class

为了判断元素是否存在指定的class,可以使用如下代码:

let element = document.getElementById("my-element");
let hasClass = element.classList.contains("my-class");

以上代码将返回ID为"my-element"的元素是否存在名为"my-class"的class。如果存在,则返回true;如果不存在,则返回false。

以上是原生js实现查找/添加/删除/指定元素的class的完整攻略,可以通过classList属性和相应的方法进行实现,方便高效。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现查找/添加/删除/指定元素的class - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Javascript脚本实现静态网页加密实例代码

    为了让大家更好地理解 Javascript 脚本实现静态网页加密,这里给出一份完整的攻略,包含以下几个部分: 加密原理 加密的实现流程 实现代码及示例 加密原理 Javascript 加密所采用的原理是基于 Asymmetric Encryption (非对称加密)。所谓非对称加密,就是“有一对密钥,一个公钥,一个私钥”。公钥和私钥是一一对应的,公钥加密的数…

    JavaScript 2023年6月11日
    00
  • javascript将DOM节点添加到文档的方法实例分析

    JavaScript 是一种用于交互式网页的编程语言,可以通过它对网页进行动态操作。在网页中,我们需要通过将 DOM 节点添加到文档中来动态地改变页面内容和样式。本文将详细讲解将 DOM 节点添加到文档中的方法。 什么是 DOM 节点 DOM 是 Document Object Model(文档对象模型)的缩写,它是一种将文档表示为树形结构的方法。 在 DO…

    JavaScript 2023年6月10日
    00
  • javascript实现详细时间提醒信息效果的方法

    Javascript实现详细时间提醒信息效果的方法的攻略如下: 步骤一:准备工作 首先需要在html文件中导入jQuery库,并设置好需要添加时间提醒信息的容器。 <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js&quo…

    JavaScript 2023年5月27日
    00
  • 基于javascript html5实现多文件上传

    关于“基于JavaScript HTML5实现多文件上传”的攻略,需要考虑以下几个方面: HTML5多文件上传原理 JavaScript实现HTML5多文件上传的步骤 两个示例 HTML5多文件上传原理 HTML5提供了file对象和FormData对象,可以方便地实现文件上传功能。其中,file对象用于选择上传的文件,FormData对象用于将文件数据提交…

    JavaScript 2023年5月27日
    00
  • JavaScript实现获取dom中class的方法

    实现获取DOM中class的方法,可以使用原生JavaScript中的classList属性,也可以使用jQuery中的选择器方法。 使用原生JavaScript 获取DOM元素节点 javascript var element = document.getElementById(‘elementId’); 获取节点中的class列表 javascript …

    JavaScript 2023年6月10日
    00
  • JavaScript 中URL 查询字符串(query string)的序列与反序列化的方法

    下面就是在 JavaScript 中URL 查询字符串(query string)的序列化与反序列化的方法的攻略: URL 查询字符串序列化 如果我们想在 JavaScript 中将一个对象转换为 URL 查询参数字符串,可以使用默认的 toString() 方法。toString() 方法可以遍历一个对象中的属性并将其转换为 URL 查询参数字符串。这里是…

    JavaScript 2023年5月19日
    00
  • 深入理解vue3中的reactive()

    当谈到Vue的响应式系统时,有一个重要的函数:reactive()。在Vue3中,reactive()是我们创建响应式对象的首选方法。 1. reactive()函数的作用 reactive()函数可将一个普通JavaScript对象转换为响应式对象,从而使对象的属性变为可观察和自动更新的。这意味着,当响应式对象的某个属性发生变化时,Vue会自动使用新的值重…

    JavaScript 2023年6月10日
    00
  • JS操作Cookies包括(读取添加与删除)

    JS操作Cookies是指在网页上使用JavaScript语言来读取、添加和删除HTTP Cookies的过程。常见的应用场景包括存储用户会话信息、记录用户偏好和跟踪用户行为等。下面是JS操作Cookies的完整攻略。 1. 读取Cookies 读取Cookies的方式是通过document.cookie属性来读取当前域名下的所有Cookies。docume…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部