原生js来实现对dom元素class的操作方法

最新推荐文章于 2023-09-07 15:52:30 发布
最新推荐文章于 2023-09-07 15:52:30 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript dom addclass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusirxiaer/article/details/77236843
版权

jQuery操作class的方式非常强大

写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在


下面为一toggleClass的测试例子

[html]  view plain  copy
  1. <style type="text/css">  
  2.     div.testClass{  
  3.         background-color:gray;  
  4.     }  
  5. </style>  
  6.   
  7. <script type="text/javascript">  
  8. function hasClass(obj, cls) {  
  9.     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
  10. }  
  11.   
  12. function addClass(obj, cls) {  
  13.     if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
  14. }  
  15.   
  16. function removeClass(obj, cls) {  
  17.     if (hasClass(obj, cls)) {  
  18.         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
  19.         obj.className = obj.className.replace(reg, ' ');  
  20.     }  
  21. }  
  22.   
  23. function toggleClass(obj,cls){  
  24.     if(hasClass(obj,cls)){  
  25.         removeClass(obj, cls);  
  26.     }else{  
  27.         addClass(obj, cls);  
  28.     }  
  29. }  
  30.   
  31. function toggleClassTest(){  
  32.     var obj = document. getElementById('test');  
  33.     toggleClass(obj,"testClass");  
  34. }  
  35. </script>  
  36.   
  37. <body>  
  38.     <div id = "test" style = "width:250px;height:100px;">  
  39.         sssssssssssss  
  40.     </div>  
  41.     <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
  42. </body>  
yusirxiaer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生JS给DOM元素增加修改删除class
Missing
10-16 3114
上古时代常用的方法 document.getElementsByTagName('body')[0].className = 'snow-container'; //把所有class替换成指定class document.getElementsByClassName('test')[1].setAttribute("class",'newClass') //与上一个等价 document.ge...
JavaScript操作DOM元素中的class属性
翅膀同学的CSDN Blog
12-14 2031
在交互性较强的Web应用中，经常需要动态更改指定元素的属性值，假设变量e是页面中一个元素的引用，根据W3C DOM标准，可以在JavaScript中使用e.getAttribute('属性名')来取得属性的值，并且用e.setAttribute('属性名', '值')来设置属性值。网页标签中，class是一个常用的属性，用于指定某一个元素遵从一个或多个自定义样式，由于class属于JavaScri...
js为dom元素添加class名
mm_hello11的博客
03-27 6757
代码如下： <div class="aa bb cc" id='name'></div> <script type="text/javascript"> function addClass(el, className){ if(hasClass(el, className)){ return } var newClass = el...
原生dom 模拟jquery hasclass
关灯吃面
10-20 440
以上，是原生来实现hasclass的代码，做记录
js对dom的class的操作
weixin_46564011的博客
01-20 1648
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js对dom的class的操作</title> <!-- dom对类属性的操作: 如果是js对style中某一个属性的修改,js每改变一次style属性 就得去重新渲染一次浏览器 我们可以使用css的class 让js执行一次换多个属性优化 --.
封装原生js操作dom节点操作class
weixin_45288512的博客
07-15 229
使用ts封装原生操作类的方法，比如添加删除切换是否包含。
原生JavaScript来实现对dom元素class的操作方法(推荐)
01-19
写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在)，就删除(添加)一个样式 4.hasClass:判断样式是否存在...
JS选取DOM元素常见操作方法实例分析
12-04
本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考，具体如下： JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2...
原生js实现查找/添加/删除/指定元素的class
10-27
原生JavaScript提供了对DOM元素的直接访问，让我们能够不依赖任何库如jQuery来实现这些功能。在本篇文章中，我们将探讨如何使用原生JavaScript实现查找、添加、删除以及指定元素的class。 1. **查找元素的class** ...
JS选取DOM元素的简单方法
11-23
在JavaScript中，选取DOM元素是Web开发中的基本操作，它涉及到如何高效地定位页面上的特定元素。本文将详细探讨几种常见的DOM元素选取方法，包括通过ID、名称、标签名、CSS类以及CSS选择器。 1. 通过ID选取元素...
原生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{
js-DOM给class追加一个新的元素
sina_panda
03-12 7443
在需要给一个元素追加新的class时，你可以按照以下步骤： 检查className属性的值是否为空； 如果是，把新的class设置值直接赋予给classNameN； 如果不是，把一个新的class设置的值直接赋予个className属性上去 我们把上面的步骤封装成一个函数，addClass。这个函数带有两个参数：第一个是添加新的class的元素（element），第二个是新的class设置值（val
通过DOM对象获取/修改CSS样式 & class
qq2071114140的博客
08-18 7875
文章目录通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式2. 获取当前样式IE8及以下不支持，其它支持：`window.getComputedStyle(element)`仅IE浏览器支持：`element.currentStyle.XXX`封装一个通用的方法总结 通过DOM对象获取/修改CSS样式 1.获取 & 修改内联样式 对于一个元素结点来说，内联样式style就是元素结点的一个属性节点。 可以通过element.style.XXX来获取这个元素结点的内联样式；同时，也可以
Dom的class类名操作
qq_42529941的博客
02-24 1499
<div class="active die"> </div> 1.给div添加多个class，用dom.classlist.add() 比如我要添加a 和 b两个class：dom.classlist.add(“a”,“b”) 如已经存在，取消添加 2.删除div中的class，用dom.classlist.remove() 比如我要删除active这个class：dom.classlist.add(“active”) 3.判断div中是否存在这个class,用dom.cla
JavaScript(DOM)
APLL_的博客
03-24 778
DOM:document object model - 文档对象模型 利用对象模型操作html文档的 顶层对象 - document html 基本结构 标签 html - console.log（document.documentElement） body -console.log( document.body ); head - console.log( document.head) 文本 - title - console.log...
原生dom如何对元素的class进行操作
u014608930的博客
08-03 1837
今天看书时突然发现了classList属性，是DOMTokenList的实例，以数组的形式保存元素的class属性。 classList可以用来很方便的操作元素的class，对其增删该查操作。 说来惭愧，一直以来都是用jquery对元素的class进行操作，以为原生js的class操作必须要通过className属性来实现，指导今天才发现了原来H5早就提供了classList这一属性来方便开发...
DOM操作class与style
m0_67212141的博客
12-12 1232
快来学习吧，原创不易，多多支持呀！每篇都是干货!
js：对dom元素class属性进行读取、更新、移除操作
最新发布
彭世瑜的博客
09-07 1950
综上，一共有三种方式对dom元素class属性进行读取、更新、移除操作。DOMTokenList对象。
给多个dom加class名
weixin_42594427的博客
01-06 370
可以使用JavaScript来为多个dom元素添加class名。 例如，假设你有一个包含多个div元素的HTML文档，并且你想为这些div元素添加一个名为"highlighted"的class名。你可以使用JavaScript中的getElementsByTagName()方法来获取这些div元素，然后使用循环来遍历它们，并使用classList.add()方法为每个div元素添加class名。 ...
uniapp获取dom元素的方法
08-31
在UniApp中，可以使用以下方法获取DOM元素： 1. 使用 `this.$refs`：在template模板中，给目标元素添加 `ref` 属性，然后可以使用 `this.$refs` 访问该元素。示例如下： ```html <template> <div ref="myDiv">Hello, UniApp!</div> </template> ``` ```javascript export default { mounted() { const myDiv = this.$refs.myDiv; console.log(myDiv); // 获取到目标元素 } } ``` 2. 使用 `uni.createSelectorQuery()`：通过创建选择器查询对象，可以使用类似于原生JavaScript的 `querySelector()` 方法来选择和操作DOM元素。示例如下： ```javascript export default { mounted() { uni.createSelectorQuery().select('.my-class').boundingClientRect(data => { console.log(data); // 获取到目标元素的信息 }).exec(); } } ``` 其中，`.my-class` 是要选中的元素的类名。 请注意，在使用上述方法之前，需要确保DOM元素已经被渲染到页面上，可以在 `mounted()` 生命周期钩子函数中进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值