原生js怎么添加一个或多个类名？（赞）

最新推荐文章于 2022-12-28 21:12:16 发布
最新推荐文章于 2022-12-28 21:12:16 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： 赞 实用 JavaScript CSS HTML5
实用 同时被 3 个专栏收录
738 篇文章 3 订阅
订阅专栏
JavaScript
311 篇文章 3 订阅
订阅专栏
赞
205 篇文章 0 订阅
订阅专栏

原文出处：https://www.jianshu.com/p/e09271abebc7

好吧今天写个js，不知道怎么添加类名了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" media="screen">
            #box {
                width:  200px;
                height: 200px;
                margin:  0 auto;
                background: pink;
                border-radius: 20px;
            }   
            @keyframes move{
                0%{width: 500px; background-color: red;}
                10%{width: 100px; background-color: green;},
                20%{width: 900px; background-color: yellow;},
                50%{width: 300px; background-color: pink;},
                80%{width: 550px; background-color: gold;},
                100%{width: 200px; background-color: purple;}
            }
            .movea {
                animation: move 1s ;
            }
            
        </style>
    </head>
    <body>
       <div id='box'>
        
       </div>

    <script type="text/javascript">
        document.getElementById('box').onclick = function() {
        
            this.setAttribute("class", "movea");
        
            this.classList.add("movea");
            
        }
    </script>
    </body>
</html>

二 .使用原生JS给元素--添加/删除类名

var dom = document.getElementById("idName");

添加 单个 class:

dom.classList.add("className1");

添加多个类:

dom.classList.add("className1", "className2", "className3", ....., "classNameN");

移除一个类:

dom.classList.remove("className1");

移除多个类:

dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

检查是否含有某个类

dom.classList.contains('className'); //return true or false

当然还有很多其他的方法，上面的也不全



作者：_信仰zmh
链接：https://www.jianshu.com/p/e09271abebc7
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

chelen_jak
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js添加一个或多个类名的方法分析
10-16
主要介绍了原生js添加一个或多个类名的方法,结合实例形式分析了javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
js选取多个或单个元素的实现代码（用class）
10-27
标题提到的"js选取多个或单个元素的实现代码（用class）"，主要是指通过元素的class属性来选取页面上匹配该类名的一个或多个元素。在实际网页开发中，我们经常需要根据类名来获取元素，以便进行样式修改、事件绑定等...
JS 添加类名/删除类名
stone10086的博客
10-30 3960
为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);为 元素移除一个类:document.getElement
用js添加类名
qq_43486347的博客
11-19 428
用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给元素添加类
weixin_30835923的博客
03-23 171
　　这个问题可以使用setAttribute()或者className属性给元素添加类名，使用方法为ele.setAttribute("class",newClass)或者ele.className = newClass，但这样相当于重写了元素的className属性，会使元素原本已有的class被覆盖，这个效果其实是替换class而非添加。　　要做到添加该如何实现呢，思路是先获取...
js添加类名的两种方法
热门推荐
想好了再写！
05-07 3万+
1.通过className来添加、删除类名 添加类名 获取元素.className = "类名1 类名2 ..."多个类名用空格隔开 移除类名 获取元素名.className = " "直接等于一个空字符串即可删除类名 2.通过classList来添加、删除类名 添加一个类名 获取元素名.classList.add("类名"); 添加多个类名用逗号隔开 获取元素名.classList..add("类名1","类名2","类名3",...); 每个类名需要用引号引起来 移除一个类名 获取元素名.classLi
用JS添加和删除class类名及相关的一些东西
penliyoushui的博客
12-23 1659
1、它可以做简单的树形结构点击高亮 基本方法 方法1. 添加：document.getElementById("id").classList.add("类名")； 删除：document.getElementById("id").classList.remove("类名")； 方法2 var classVal=document.getEleme...
基于JavaScript实现类名的添加与移除
10-19
`classList` API的优点在于它可以同时处理多个类名，例如： ```javascript // 扩展classList方法以支持多个类名 DOMTokenList.prototype.addClass = function(str) { str.split(' ').forEach(function(c) { this....
支持多个静态选项卡切换特效代码
03-20
"支持多个静态选项卡切换代码"是针对这种需求而开发的一种原生JavaScript解决方案。下面我们将深入探讨这个话题。 首先，让我们理解什么是选项卡切换。在网页上，选项卡通常用于将相关但独立的内容分组，每个内容块...
js给多个具有相同class的元素绑定同一个事件或者样式
卫可冬的博客
12-23 1万+
<button class="btn1">month1</button> <button class="btn1">month2</button> <button class="btn1">month3</button> 若要给上面3个都具有btn1的class的按钮，添加同样的点击事件，则如下操作： $(".btn1")....
vue.js：使用v-bind通过数组绑定多个class案例
零小唬的博客
12-28 541
vue.js：使用v-bind通过数组绑定多个class案例
javaScript给元素添加多个class
dllpwaa719081的博客
07-19 241
<html> 　　<head> 　　　　<style type="text/css"> 　　　　　　.div2{ 　　　　　　font-size:16px;　 　　　　　　color:orange; 　　　　　　} 　　　　　　.div3{ 　　　　　　font-size:20px; 　　　　　　color:blue; 　　　　　　...
js_对多个同名id 添加 事件_多个对象如何绑定同一事件
icecoola_的博客
06-15 1万+
$("[id='s_username']").change(function(){ if($("[id='s_username']").val()==''){ $("#s_userId").val(""); } }) $("#div1,#divN,xxxxxxx").click(function(){ }); jquery 多个对
js 动态添加多个class
WangJiangNan17214的博客
08-16 4428
setAttribute('class', 'abc')    .ddddd {  background: black;  }  .abc {  background: red;  }        test div    var div = document.getElementById('d1');  // div.setAttribute("class", "ab
JS 获取多个相同class的html内容
༺墨༒眉༻
10-23 2815
&lt;div&gt; &lt;p class="molecule"&gt;30&lt;/p&gt; &lt;p class="Denominator"&gt;7.5%&lt;/p&gt; &lt;p class="molecule"&gt;500&lt;/p&gt; &a
js中多个相同class 只传递被点击事件节点值
qq_31933363的博客
04-24 6466
在JSP中使用foreach循环 往往出现许多相同的class ，例如&lt;c:forEach items="${userList}" var="user"&gt;&lt;td&gt; &lt;span class="showDetail"&gt; &lt;input type="hidden" value="${user.id }"
JS为多个标签绑定相同的事件
qq_50887722的博客
09-01 2488
*遇到多个标签需要绑定事件，一个一个绑定太过于麻烦； 选择循环绑定更为方便； // 获取相同classname的标签，是一个数组 var list = document.getElementsByClassName("n_list"); for (var i = 0; i < list.length; i++) { list[i].onmousemove = change; /* 绑定事件，这里函数不能加括号，否则绑定失败*/ } // 写一个函数改变标签的样式，this指向需要改变的对.
js 多个按钮class相同怎么判断谁按下了_Vue.js面试题整理
weixin_39828193的博客
11-25 1048
一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewMode...
js遍历获取所有相同class的值
flysnownet的博客
07-22 2万+
代码 var tags = []; $(".tagval").each(function(i,e){ tags[i]= $(this).context.innerText; }); console.log(tags); 结果
微信小程序开发 vue 动态添加多个不同的class类名
最新发布
07-14
在微信小程序开发中使用Vue，你可以通过动态绑定class属性来实现动态添加多个不同的class类名的效果。以下是一个示例： 首先，在Vue的data中定义一个数组，用于存储要添加的class类名，比如： ```javascript data() { return { dynamicClasses: ['class1', 'class2'] }; }, ``` 然后，在模板中使用`v-bind`或简写的`:`来动态绑定class属性，通过数组的方式来添加多个class类名，例如： ```html <template> <div :class="dynamicClasses"> <!-- 内容 --> </div> </template> ``` 在上述代码中，`dynamicClasses`数组中的每个元素都会被解析为一个class类名，并添加到目标元素的class属性中。 你可以在适当的时机修改`dynamicClasses`数组，从而实现动态添加或移除多个不同的class类名的效果。例如，在某个按钮的点击事件中修改该数组： ```javascript methods: { toggleDynamicClasses() { this.dynamicClasses = ['class1', 'class2', 'class3']; } } ``` 通过调用`toggleDynamicClasses()`方法，可以将`dynamicClasses`数组更新为包含三个不同的class类名，从而动态添加多个不同的class类名。 希望以上信息对你有所帮助！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值