js 动态添加多个class

最新推荐文章于 2023-07-13 10:55:30 发布
最新推荐文章于 2023-07-13 10:55:30 发布
阅读量4.4k 收藏 2
点赞数
分类专栏： js
<!-- <!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('class', 'abc')</title> 
<style type="text/css"> 
.ddddd { 
background: black; 
} 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="d1" class="ddddd">test div</div> 
<script> 
var div = document.getElementById('d1'); 
// div.setAttribute("class", "abc"); 
div.className+=" "+'abc'  
</script> 
</BODY> 
</HTML>  -->












<html>
　　<head>
 
　　　　<style type="text/css">
 
　　　　　　.div2{
 
　　　　　　font-size:16px;　
 
　　　　　　color:orange;
 
　　　　　　}
 
　　　　　　.div3{
 
　　　　　　font-size:20px;
 
　　　　　　color:blue;
 
　　　　　　}
 
　　　　</style>
 
　　　　<script type="text/javascript">
 
　　　　　　[1]直接把样式赋值给className
 
　　　　　　var odiv=document.getElementById('div1');
 
　　　　　　odiv.className= 'div3'
 
　　　　　　//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
 
　　　　　　[2]使用累加赋值给className
 
　　　　　　var odiv=document.getElementById('div1');
 
　　　　　　odiv.className+=" "+'div3'  　　//样式和样式之间需要空隙 ，所以加个空字符串隔开
 
　　　　　　//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
 
　　　　　　[3]检测样式原先之前是否有相同的样式
 
　　　　　　var odiv=document.getElementById('div1');　
 
　　　　　　function hasClass(element,csName){
 
　　　　　　　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
 
  
 
　　　　}　　
 
　　　　　　[4]在[3]的基础上我们就可以进行判断性给元素添加样式了　　　　　
 
　　　　　　var odiv=document.getElementById('div1');　
 
　　　　　　function hasClass(element,csName){
 
　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
 
　　　　}　
 
　　　　　　function addClass(element,csName){
 
　　　　　　　if(!hasClass(element,csName)){
 
　　　　　　　　　element.className+=' '+csName;
 
　　　　　　}
 
　　　　addClass(odiv,'div3');
 
　　　　//这样就可以灵活给元素添加样式了;
 
　　　　【元素删除指定样式】
 
　　//同样先进行判断，在进行删除
 
　　
 
　　　　　var odiv=document.getElementById('div1');　
 
　　　　　function hasClass(element,csName){
 
　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
 
　　　　}　
 
　　　　　function deleteClass(element,csName){
 
　　　　　　　if(!hasClass(element,csName)){
 
　　　　　　　　　element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' ');  //利用正则捕获到要删除的样式的名称，然后把他替换成一个空白字符串，就相当于删除了
 
　　　　　}
 
 
　deleteClass(odiv,div3);
  
 
　　}
 
　　　　</script>
 
　　</head>
 
　　<body>
 
　　　　<div id="div1" class='div2'> 测试</div>
 
　　</body>
 
</html>
WJN17214
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript给元素添加多个class的简单实现
12-10
javaScript给元素添加多个class的简单实现 <html> 　　<head> 　　　　<style type="text/css"> 　　　　　　.div2{ 　　　　　　font-size:16px;　 　　　　　　color:orange; 　　　　　　} 　　　　　　.div3{ 　　　　　　font-size:20px; 　　　　　　color:blue; 　　　　　　} 　　　　<style> 　　　　[removed] 　　　　　　[1]直接把样式赋值给className 　　　　　　var odiv=document.get
javaScript给元素添加多个class
dllpwaa719081的博客
07-19 240
<html> 　　<head> 　　　　<style type="text/css"> 　　　　　　.div2{ 　　　　　　font-size:16px;　 　　　　　　color:orange; 　　　　　　} 　　　　　　.div3{ 　　　　　　font-size:20px; 　　　　　　color:blue; 　　　　　　...
原生js给DOM元素添加一个或者多个类的方法总结
WuBoing~的博客
08-16 1483
本文链接：https://blog.csdn.net/qq_34645412/art...
javaScript给元素添加多个class的简单实现.docx
01-18
javaScript给元素添加多个class的简单实现.docx
js 操作元素 className 多个值
qq_33435149的博客
04-07 366
用js操作元素的属性class多个值，并且去掉其中的值，添加想要的值。
JS脚本 - 批量给所有指定标签追加Class属性
最新发布
Zong_0915的博客
07-13 1552
公司里我们有个应用引入了UBT埋点，记录了页面上所有的点击操作以及对应的点击按钮。但是我们看下来发现，我们需要给每个按钮加一个唯一标识做区分，并且这个ID是给UBT埋点专用的。那怎么办呢？加Id： 不合理，因为如果某个标签已经自带Id了，我们不太可能去覆盖它。加Class：合理，class属性可以加多个，也可以过滤。
React的jsx模块中如何引用两个类名
独酌101112的博客
09-06 1385
在CSS文件中有以下两个类名，如何同时引用这两个类呢？ .title{ color: red; text-align: center; font-weight: 200; } .test{ font-style: italic; } 如果这样写的话，后面的类会将之前的类覆盖掉： <h1 className={cssobj.title} className="test">这是评论区列表组件</h1> 并没有达到预期的效果，考虑到类名都是字符串的类
js给多个具有相同class的元素绑定同一个事件或者样式
卫可冬的博客
12-23 1万+
<button class="btn1">month1</button> <button class="btn1">month2</button> <button class="btn1">month3</button> 若要给上面3个都具有btn1的class的按钮，添加同样的点击事件，则如下操作： $(".btn1")....
jQuery给多个不同元素添加class样式的方法
10-24
`addClass()`方法是jQuery提供的一个强大功能，它允许我们向匹配的元素集合中的每个元素添加一个或多个class。在本文中，我们将深入探讨如何使用这个方法来给多个不同元素添加class样式。 首先，`addClass()`方法的...
JavaScript实现动态添加Form表单元素的方法示例
10-19
这种动态添加表单元素的方法在处理不确定数量的输入时非常有用，例如上传多个文件、填写多行评论等。通过理解这些基本的DOM操作，你可以创建更复杂的交互式网页应用。在实际开发中，还可以结合其他JavaScript库和...
vue.js：使用v-bind通过数组绑定多个class案例
零小唬的博客
12-28 524
vue.js：使用v-bind通过数组绑定多个class案例
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的html内容
༺墨༒眉༻
10-23 2803
&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 6464
在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怎么添加一个或多个类名？（赞）
chelen_jak的专栏
09-18 1131
原文出处：https://www.jianshu.com/p/e09271abebc7 好吧今天写个js，不知道怎么添加类名了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/
js实现字符串的截取及拼接
weixin_42380671的博客
03-17 727
代码： </head> <body> <div class="text">dddddddddddddddddddddddddddddddd</div> <div class="text">ffffffffffffffffffffffffffffff</div> <div class="text">dvvvvvvvv...
js 批量操作html标签的class类属性值
全易
02-24 1239
// 1 添加一个或多个类名 element.classList.add('classone','classtwo',···); // 2 删除一个或多个类名 element.classList.remove('classone','classtwo',···); // 3 检索该类里是否有哪个类名 element.classList.indexOf('classname'); eleme...
JS为多个标签绑定相同的事件
qq_50887722的博客
09-01 2471
*遇到多个标签需要绑定事件，一个一个绑定太过于麻烦； 选择循环绑定更为方便； // 获取相同classname的标签，是一个数组 var list = document.getElementsByClassName("n_list"); for (var i = 0; i < list.length; i++) { list[i].onmousemove = change; /* 绑定事件，这里函数不能加括号，否则绑定失败*/ } // 写一个函数改变标签的样式，this指向需要改变的对.
js中添加多个class
04-29
在JavaScript中，你可以使用`classList`属性来添加多个class。以下是一个快速示例： ```html <div id="myDiv" class="foo"> ``` ```javascript var myDiv = document.getElementById("myDiv"); myDiv.classList....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值