原生js添加类名、删除类名

最新推荐文章于 2023-07-19 20:32:29 发布
最新推荐文章于 2023-07-19 20:32:29 发布
阅读量2.4k 收藏 3
点赞数 1
文章标签： html5 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao97/article/details/105664005
版权

1.添加类名

document.getElementsByClassName('myEL')[0].classList.add('checked');

2.删除类名

document.getElementsByClassName('myEL')[0].classList.remove('checked');

3.包含类名

document.getElementsByClassName('myEL')[0].classList.contains('checked'); 
//true or false
～倩
关注
js动态给dom元素添加类名
u011200562的博客
08-22 2290
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
详解用JS添加和删除class类名
12-08
下面介绍一下如何给一个节点添加和删除class名 添加：节点.classList.add(“类名”)； 删除：节点.classList.remove(“类名”)； 以tab切换为例： 在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。 比如 起一个class名叫“active” 设置样式 .active{ color: #FFD113 !important; } 在html代码中给首页（默认选中）加上class名active <a> <spa
详解原生JS动态添加和删除类
12-03
由于需要， 给按钮组监听点击事件(要求用事件委托)，当有一个按钮被点击时，相应的给该按钮添加一个类(激活类)，其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等到一个 dom 对象(也叫dom元素)， 通过document.getElement……的几种方法得到 如` let element = document.getElementById("box"); 1.通过类名， 获取类名： el.className， 赋值： el.className = “className” 会覆盖掉原来的类 2.通过属性，获取类名： el.getAttribute(“class”); 赋值：
原生js添加类名
热门推荐
前端指南
01-18 5万+
     动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。     当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升...
JS封装 — 原生添加类名，删除类名
请叫我李先生
11-03 1265
/* 删除类名 */ window.onload = function () { var stamp = document.getElementById("btGetCode"); //根据id查找到该标签 removeClass(stamp, "can-code"); //调用JS原生删除class的方法 ...
原生js添加类名，删除类名
u011927449的博客
01-18 706
1.添加类名： document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名： document.getElementById("...
用js添加类名
qq_43486347的博客
11-19 438
用js添加类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
原生js添加一个或多个类名的方法分析
10-16
主要介绍了原生js添加一个或多个类名的方法,结合实例形式分析了javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
基于JavaScript实现类名的添加与移除
10-19
在JavaScript中，管理和操作元素的类名是网页动态效果实现的关键。本文主要讲解两种方法来实现类名的添加、移除以及切换功能：通过`className`属性和使用`classList` API。 ### 方法1：使用`className`属性 `...
js 添加类名
weixin_30861797的博客
02-14 83
1 var s="<li class=\"show\">"+init[i]+"</li>"; js 中添加类名 转载于:https://www.cnblogs.com/gf1394/p/6398563.html
JS 添加类名/删除类名
stone10086的博客
10-30 3971
为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);为 元素移除一个类:document.getElement
给js添加类名/添加元素标签/
weixin_42666092的博客
03-22 3715
原生js中添加类的方法 1. document.getElementById(“div”).classList.add(“类名”); //2.为 元素添加多个类: document.getElementById(“div”).classList.add(“类名1”,“类名2”,“类名3”,…); //3.为 元素移除一个类: document.getElementById(“div”).classList.remove(“类名”); //4.为 元素移除多个类: document.getElement
原生JS判断元素是否包含某个className，添加className，移除className
05-10 3241
function hasClassName(obj,name){ let tmpName = obj.className; let tmpReg = new RegExp(name,'g'); if(tmpReg.test(tmpName)){ return true; }else{ return false; } } //调...
JS动态添加样式类名
最新发布
Adios_0403的博客
07-19 2301
/ 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除。// 2 contains() 有就返回 ture，没有就返回 false。// 2. 切换类 toggle() 有还是没有 有就删掉，没有就加上。// 2. 删除类 remove() 类名不加点，并且是字符串。// 2 追加类 add() 类名不加点，并且是字符串。// 通过 classList 添加。// 通过 classList 添加。// 通过 classList 添加。// 1. 获取元素。
用JS添加和删除class类名
weixin_30273763的博客
03-15 333
方法1. 添加：document.getElementById("id").classList.add("类名")； 删除：document.getElementById("id").classList.remove("类名")； 方法2 var classVal=document.getElementById("id").getAttribute("class"); 添加：docume...
[js] 添加类名、删除类名
qq_14993591的博客
04-14 1575
添加类名： document.querySelector('.process').classList.add('left_bottom') 删除类名： document.querySelector('.process').classList.remove('left_bottom') 是否包含： document.querySelector('.process').classList.contains('left_bottom') 添加类名、删除类名 ...
用原生js实现addClass,removeClass,hasClass方法
东篱与南山
04-18 2万+
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除
js 给img元素添加类名
05-31
可以使用 JavaScript 为 img 元素添加类名，方法如下： ```javascript var img = document.getElementById('myImg'); // 获取 id 为 myImg 的 img 元素 img.classList.add('myClass'); // 添加名为 myClass 的类名 ``` 其中，`classList` 是 img 元素的一个属性，它返回一个 DOMTokenList 对象，表示元素的类名列表。`add` 方法用于添加新的类名，如果已经存在该类名，不会重复添加。另外，也可以使用 `remove` 方法来移除类名，使用 `toggle` 方法来切换类名的状态。 需要注意的是，在添加类名之前，需要先确保该类名已经定义在 CSS 样式表中，否则添加类名的效果将不会生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值