超有用！原生JS实现增加删除class（addClass,removeClass,toggleClass）

最新推荐文章于 2025-06-27 06:15:56 发布
最新推荐文章于 2025-06-27 06:15:56 发布
阅读量5.3k 收藏 1
点赞数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
    .night-mode{ 
        background:#383838; 
        color:#888888;
    } 
</style> 
   
<script type="text/javascript"><br data-filtered="filtered">//判断样式是否存在
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
//为指定的dom元素添加样式
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
//删除指定dom元素的样式
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");//正则表达式，需要补血
        ele.className = ele.className.replace(reg, " ");
    }
}
//如果存在(不存在)，就删除(添加)一个样式
function toggleClass(ele,cls){ 
    if(hasClass(ele,cls)){ 
        removeClass(ele, cls); 
    }else{ 
        addClass(ele, cls); 
    } 
}
//调用
function toggleClassTest(){ 
    var ele = document. getElementsByTagName('body')[0]; 
    toggleClass(ele,"night-mode"); 
} 
</script>
</head>
   
<body> 
    <div style = "width:250px;height:100px;"> 
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
     <p>这是一段文字 </p>
    </div> 
    <input type = "button" value = "变黑" onclick = "toggleClassTest();" /> 
</body>
</html>
Ron_Miu
关注
使用原生JavaScript实现addClass、removeClass和hasClass函数
ByteZenith的博客
09-21 602
这些函数可以帮助我们动态地添加、删除和检查元素的类名，从而实现样式的修改和控制。在前端开发中，我们经常需要操作DOM元素的类名。这些函数可以帮助我们动态地添加、删除和检查元素的类名，从而实现样式的修改和控制。通过以上代码，我们可以看到addClass函数成功地添加了一个新的类名，hasClass函数返回了true，而removeClass函数成功地将类名移除后，hasClass函数返回了false。实现的思路是先检查元素是否已经有了该类名，如果没有，则将新的类名添加到元素的classList属性中。
使用原生 JavaScript 实现 addClass、removeClass 和 toggleClass 功能的示例
CgbAutoit的博客
10-02 985
它将查找匹配选择器的所有元素，并为每个元素切换指定的类名，即如果元素有该类名，则删除它；它将查找匹配选择器的所有元素，并为每个元素切换指定的类名，即如果元素有该类名，则删除它；与 addClass 函数类似，removeClass 函数也接受两个参数：元素的选择器和要删除的类名。与 addClass 函数类似，removeClass 函数也接受两个参数：元素的选择器和要删除的类名。你可以在你的项目中使用这些函数来动态修改元素的类名，以实现各种样式和交互效果。首先，让我们来实现 addClass 函数。
原生JS实现addClass,removeClass,toggleClass
热门推荐
LowKeySk的专栏
10-12 10万+
jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在)，就删除(添加)一个样式 4.hasClass:判断样
.addClass() 方法详解
最新发布
froginwe11的博客
06-27 316
方法是jQuery库中的一个成员，它允许开发者向一个或多个元素添加一个或多个类。这个方法可以接受一个字符串参数，该参数包含一个或多个由空格分隔的类名。方法是jQuery中一个非常有用的DOM操作方法，它可以帮助开发者轻松地向元素添加CSS类。通过理解其用法和参数，你可以更有效地使用这个方法来控制页面元素的样式，从而提升你的Web开发技能。
js原生removeclass方法
weixin_34159110的博客
09-13 1139
//如果列表中有存在给定的值就删除 // function removeClass(ele,txt){ // var str = ele.className, // ary = str.split(/\s+/), // pos = -1, // i = ary.length-1; // for(;i>=0;i--){ // if...
转：原生JS实现addClass,removeClass,toggleClass
12-28 426
原文地址：http://blog.youkuaiyun.com/lowkeysk/article/details/8063816 分类： js/jquery2012-10-12 11:25 285人阅读 评论(0) 收藏 举报 jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元
原生js实现addClass,removeClass和toggleClass
lakenQi
09-25 646
综述 Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法，也让原生js的各种class操作变得方便起来。然而，兼容性来了，classList只兼容IE10及以上（这里只提IE吧，IE是前端过不去的兼容坎），因此十分想方便的用原生js，又纠结在了兼容性上，干脆，那就自己来实现一下吧，都给它扔进去，兼容的就classList，不兼容的就用...
原生js实现addclass,removeclass,toggleclasss实例
11-29
在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在)，就删除(添加)一个样式 4.hasClass:判断样式是否...
原生JavaScript来实现对dom元素class的操作方法(推荐)
10-19
总而言之，通过学习如何使用原生JavaScript实现对DOM元素class的操作，开发者可以更灵活地控制网页的样式表现，同时减少对jQuery等库的依赖，有助于提高网页性能和减少加载时间。这种方法是前端开发中的一个重要技能...
原生JS写toggleclass方法
weixin_33932129的博客
09-08 1144
function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { ...
原生JS实现addclass
Cloud1209的博客
01-17 1113
** 只介绍关键部分代码，可自己尝试应用 ** CSS .class1{ display: none; } HTML <div id="card0"> </div> JS代码 function addClass(ele, str) { if (ele.className) { var oriNam...
原生javascript实现addClass和removeClass
aitcax的专栏
11-19 3784
addClass()和removeClass()是jQuery提供的功能。 用法： $(selector).addClass(classname);和$(selector).removeClass(classname);在大多数情况下，使用jquery的选择器选择的元素是可以使用这两个方法来追加和删除class属性的，但是有一些特殊情况，不是通过$()选择器及jQuery其他方法（比如paren
原生js :removeClass和addClass
QDY5945的博客
11-01 364
1 function removeClass(obj, aClass) { 2 var re = new RegExp('\\b' + aClass + '\\b'); 3 if (o...
原生js添加删除class
magicw3的博客
05-06 1万+
 之前在网上查过一些添加删除class的原生js写法，感觉用着很方便，于是我就自己按自己的需求找了一个 Object.prototype.hasClass = function(cls) { return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }; Object.prototype.addCl
JS原生添加删除class的方法
xiaozhen0610的博客
08-16 697
之前习惯了使用jquery的addClass的方法，然后就去找了下别人写的代码。 [javascript] view plain copy function hasClass(obj,cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }; function addClass(obj,cls) { if (!hasClass(obj,cls)) obj.classNam
原生JS添加删除Class
banzaopu8688的博客
02-24 163
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript原生添加移除class的方法
Hubert Biyo的博客
06-24 1万+
1.JavaScript原生移除class方法 window.onload = function () { var stamp = document.getElementById("btGetCode"); //根据id查找到该标签 removeClass(stamp, "can-code"); //调用JS原生删除c
原生JS实现jQuery常用功能：简化DOM操作与事件处理
原生JavaScript中，我们可以直接使用DOM元素的`classList`属性，如`document.querySelector('.el').classList.add('class')`添加类，`document.querySelector('.el').classList.remove('class')`删除类，或者`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值