原生JS操作class属性

最新推荐文章于 2024-06-29 11:51:30 发布
最新推荐文章于 2024-06-29 11:51:30 发布
阅读量3.7k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39706777/article/details/119951085
版权

原生JS操作class属性

1. classList

  • Element.classList: DOMTokenList
    通过classList获取元素的class属性值,使用以下方法操作class值

方法：

  • add(className：String) 添加一个class值
  • remove(className:String)删除一个class值
  • replace(oldclassName: string, newclassName: string) 将一个class属性替换为另外一个
  • contains(className：String) 是否包含某个class
  • toggle(className：String) 如果包含某个class，就删除此class值；如果不存在，就添加它

2. className

  • Element.className: string

通过className获取元素的class值，返回一个字符串，类名以空格分隔

可以通过Element.className += className给当前元素添加一个类名

liun_n
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js操作class的方式
liliy__的博客
04-14 559
原生js操作class的方式 className – 会覆盖掉所有的class <div class="box">这里是内容</div> var div = document.querySelector(".box"); div.className = "box1"; – 以上代码的结果 box1覆盖了原来的box classLIst – 在原来的基...
原生js封装添加class,删除class的实例
11-28
原生JavaScript提供了对DOM元素的`className`属性的访问，但并没有提供直接添加或删除单个class的方法。因此，开发者经常需要自定义函数来实现这样的功能。下面将详细解释如何使用原生JavaScript封装添加和删除class...
JavaScript，类属性class的操作。
weixin_43228946的博客
08-28 2315
我们现在利用JavaScript操作class，给元素增加属性。具体演示代码如下： 1.判断一个元素中是否含有指定的class属性，如果有这个class则返回true，否则返回false ```javascript function hasClass(obj, cn) { var reg = new RegExp("\\b" + cn + "\\b");//这里利用正则表达式 return reg.test(obj.className); } ``` 2.删除元素中的class的属性 ...
js中设置元素class的三种方法小结
热门推荐
晨港飞燕的专栏
08-30 2万+
一、el.setAttribute('class','abc'); 代码如下: .abc { background: red; }test div var div = document.getElementById('d1'); div.setAttribute("class", "abc");    IE6/7 : div背景色不是红色     IE8/9/10/Fir
js给指定class类的对象，添加或者移除class类，以及js动态修改其css样式
最新发布
weixin_42966151的博客
06-29 289
【代码】js动态给指定class类的对象，添加或者移除class类，以及动态修改其css样式。
js 操作元素的 class 属性
艾斯比
06-05 1175
使用 js 可以操作元素的 class 属性 /* https://developer.mozilla.org/zh-CN/docs/web/api/element/classlist */ let p = document.querySelector('p') // 重新赋值 class 属性 p.className = 'class3' // 如果 class33 类值已存在, 则移除它, 否则添加它 p.classList.toggle("class33");
javascript操作class属性
FISH 的专栏
11-14 1763
在交互性较强的Web应用中，经常需要动态更改指定元素的属性值，假设变量e是页面中一个元素的引用，根据W3C DOM标准，可以在JavaScript中使用e.getAttribute('属性名')来取得属性的值，并且用e.setAttribute('属性名', '值')来设置属性值。网页标签中，class是一个常用的属性，用于指定某一个元素遵从一个或多个自定义样式，由于class属于JavaScri
js中class的使用
shao.zq的博客
01-12 3581
ES6中类的使用 如何创建一个类 class User{} //第一种 let User=class{} //第二种 构造函数的使用与参数初始化 class User{ constructor(name){ this.name=name; } } 静态属性的定义与使用 class request{ static host="http://127.0.0.1"; postBody(url){ return request.host+`/${url}` } } le
js操作class类的方法
superfa的博客
05-25 939
DOM里的每个节点上都有一个classList对象，既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁，替换成什么)替换 contains(类名) 布尔值 toggle(类名) 切换 返回值还是布尔值（有就切掉，没有就加上） item(索引) 试试 添加类（add） el.classList.add(‘red’,‘blue’); ...
原生js实现查找/添加/删除/指定元素的class
10-27
在JavaScript中，操作DOM元素的CSS类（class）是非常常见的任务。原生JavaScript提供了对DOM元素的直接访问，让我们能够不依赖任何库如jQuery来实现这些功能。在本篇文章中，我们将探讨如何使用原生JavaScript实现...
示例4：操作节点属性.rar_javascript操作节点属性
09-20
7. **数据属性操作**：HTML5引入了自定义数据属性（data-*），如`data-myattr`。JavaScript中可以通过`dataset`属性访问，例如，`document.getElementById('myElement').dataset.myattr;` 这些操作在实际网页开发中...
原生js实现class的添加和删除简单代码
10-21
在JavaScript中，操作DOM元素的CSS类（class）是常见的需求，这通常涉及到添加或删除特定的类以改变元素的样式。在ES6之前，原生JavaScript并没有提供直接的方法来处理这一任务，但我们可以利用字符串操作来实现。...
用原生JS获取CLASS对象(很简单实用)
12-02
总结来说，原生JavaScript获取具有特定类名的DOM元素主要涉及`getElementsByTagName`、`getAttribute`和数组操作等方法。对于处理多个相同类名的元素，可以使用数组遍历结合闭包或事件监听来实现不同的功能。虽然...
原生js操作class
avtcpm1927的博客
03-07 210
原生js操作class 方式一： var div = docuemnt.querySelector('div.container'); // 获取元素 　　　　 div.className = 'container hidden'; 方式二： HTML...
js 设置class
周尚冬的专栏
04-27 6124
今天遇见了需要动态给一个Div设置样式.然后发现 居然使用document.getElementById("divID").class="mydivclass";居然不行于是没有办法啦,就上网看了一下.原来需要指定的是classsname而不是class于是:document.getElementById("divID").className="mydivclass";就成
js操作class
weixin_30237281的博客
09-16 302
//判断有无 function hasClass(ele, cls) { return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); } //添加 function addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele....
怎么通过原生JS改变元素的class属性
diaojinxun8373的博客
09-22 959
解决方法：document.getElementById('test').className = 'emphasis' Eg： <!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Test</title&...
原生js删除增加修改class属性className
細水、長流√的专栏
05-19 5060
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 HTML DOMclassList属性 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除，否则添加 根据红宝书的介绍，目前支持classList属性的浏览器有Fi..
JavaScript Class类详解
m0_37824255的博客
05-18 1万+
ECMAScript 6 提供了更接近传统语言的写法，新引入的class关键字具有正式定义类的能力。类（class）是ECMAScript中新的基础性语法糖结构，虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念，让对象原型的写法更加清晰、更像面向对象编程的语法。
原生js查询当前class名
03-22
您可以使用Element.classList属性来查询当前元素的class名。例如，如果您想查询一个id为"myDiv"的元素的class名，您可以使用以下代码： var element = document.getElementById("myDiv"); var classNames = element...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值