原生js实现class的添加和删除简单代码

最新推荐文章于 2023-12-29 16:58:34 发布

竹立荷塘

最新推荐文章于 2023-12-29 16:58:34 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/daipianpian/article/details/107439979

版权

function hasClass( elements,cName ){ 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
};

function addClass( elements,cName ){ 
  if( !hasClass( elements,cName ) ){ 
    elements.className += " " + cName; 
  }; 
};

function removeClass( elements,cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }; 
};

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

竹立荷塘

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

原生js添加class

weixin_34315485的博客

08-17

126

functionhasClass(obj,cls){ returnobj.className.match(newRegExp('(\\s|^)'+cls+'(\\s|$)')); } functionaddClass(obj,cls){ if(!this.hasClass(obj,cls))obj.className...

原生js动态添加class

guoyinshuai的博客

03-14

1万+

在点击切换的过程中，我们需要给被选中的子选项添加“active”，然后让其它子选项删除“active”名。该怎么做呢？首先，通过JS取到所有tab的节点 var arr = document.getElementsByClassName("tab_item"); 然后只需在被选中的子节点加上.classList.add("类名")，比如： arr[i].classList.add...

参与评论您还未登录，请先登录后发表或查看评论

使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能

Lele的专栏

03-03

670

1.addClass:为指定的dom元素添加样式2.removeClass:删除指定dom元素的样式3.toggleClass:如果存在(不存在)，就删除(添加)一个样式4.hasClass:判断样式是否存在 function addClass(obj, cls){ var obj_class = obj.className,//获取 class 内容. blank = (obj

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

10-27

在本篇文章中，我们将探讨如何使用原生JavaScript实现查找、添加、删除以及指定元素的class。 1. **查找元素的class** 在JavaScript中，我们可以通过`className`属性来获取或设置一个元素的所有class。然而，`...

原生js封装添加class,删除class的实例

10-19

封装原生JavaScript的添加和删除class功能，可以使我们的代码更加模块化，易于维护和复用。通过示例代码，我们可以看到如何处理一些在操作class时可能遇到的边界问题，例如避免多余的空格和重复的类名。希望这篇文章...

原生js实现添加和删除class

weixin_44727080的博客

09-24

6422

前言：对于习惯jquery的写法以后对于原生总是不适应，实际原生中也是有直接简单的方法的。 1、添加class 添加：节点.classList.add("类名")； 2、删除class 删除：节点.classList.remove("类名")；具体使用： document.getElementById('show_one').style.display = 'block' document.getElementById('show_two').style.display ...

原生js动态添加/删除class属性值

chengyi10的博客

12-29

772

【代码】原生js动态添加/删除class属性值。

详解原生JS动态添加和删除类

10-17

主要介绍了原生JS动态添加和删除类，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

FilmProject-ES6-:一个微型项目，它使用javaScript Dom Manuptions和Dom Events添加，删除和列出电影信息。使用ES6制作

05-23

FilmProject（ES6）一个微型项目，它使用javaScript Dom Manuptions和Dom Events添加，删除和列出电影信息。使用ES6制作。

原生js添加类名

热门推荐

前端指南

01-18

5万+

动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升...

【原生js】动态添加class

jieweiwujie的博客

11-06

1万+

1.添加类名： document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名： document.getElementById("myDiv").classList.remove('mystyle'); 3.检查是否含有某个css类： myDiv.classList.contains('myCssClass'); //return true or flase; 注意：类名直接写，不可面“.”; 　　　如若同时添加多个

原生JS那些事：原生JS添加和删除class类名

weixin_33762321的博客

12-12

1274

2019独角兽企业重金招聘Python工程师标准>>> ...

原生js添加、删除元素的class

qq_35504206的博客

02-22

4243

判断一个元素是否有某个class第一种：function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格（\\s | $ ）判断后面是否有空格两个感叹号为转换为布尔值...

06-js电影的添加与删除（简单）

weixin_45344023的博客

08-06

588

电影的添加与删除（简单）简述：可以删除电影，添加电影列表。如果添加的电影名或者主演为空，将会进行弹窗提示。 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电影的添加

原生JS动态添加和删除类

阿飞

03-04

3139

原生JS动态添加和删除类由于需要，给按钮组监听点击事件(要求用事件委托)，当有一个按钮被点击时，相应的给该按钮添加一个类(激活类)，其他没有点击的按钮就要移出该类添加和和删除类有三种方法首先等到一个 dom 对象(也叫dom元素)，通过document.getElement……的几种方法得到如` let element = document.getElementById(&quot;box&quot;);...

原生js给DOM元素添加一个或者多个类的方法总结

涂涂

12-28

4万+

先看两个例子： html: 啦啦啦 css： .test{ width: 100px; height: 100px; background: #B6BAC4; } .test1{ border: 1px solid; width: 200px; border-radius: 4px; } .test2{ margin: 0 auto; } .test3{

目标检测数据集：瓶子图像缺陷检测数据【VOC标注格式】