首页 > 代码库 > 原生js获取元素的class属性（获取class的所有元素）以及改变或添加calssName
原生js获取元素的class属性（获取class的所有元素）以及改变或添加calssName
今天在工作中,用到了设置className,因此查阅了一下资料，总结一下。
一、如何用原生js获取class属性
1 <div class = "dom‘>2 </div>
元素JS实现方法：
1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组，用来存放与目标className相同的元素 5 for(var i = 0; i<odiv.length; i++) 6 {//这个是遍历页面中所有元素然后拿他们的class进行对比。如果和我们传进来的domclass这个参数一样就把他放进数组 aResult中。 7 if(odiv[i].className == domclass) 8 { 9 aResult.push(oDiv[i]); //获取到的元素推进数组中10 }11 return aResult; //返回这个放进了domclass元素的数组12 }13 }14 window.onload = function(){15 alert($class(‘boom‘).length); //获取这些元素的个数16 alert($class(‘boom‘)[0].className); //获取这些元素的第一个元素的className,其实都是一样的className.17 }
用这个函数来获取就很简单了只需要var d = $class("dom");
这个函数的意思是：
var odiv = document.getElementsByTagName("*");
这句意思是获取页面中所有的DOM元素
二、js改变或添加className
1 <style type="text/css">2 .newDiv {3 font-weight: bold;4 }5 </style>
1 <script> 2 function clk() { 3 var parent = document.getElementById("parent"); 4 // parent.className = parent.className + " newDiv"; //添加classname 5 6 parent.className = " newDiv"; //改变classname 7 8 } 9 </script>10 11 </head>12 <body>13 <input type="button" value="click" onclick="clk();"/>14 <div id="parent" class="google">15 <div >child</div>16 </div>17 18 </body>
原生js获取元素的class属性（获取class的所有元素）以及改变或添加calssName
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。