您的位置：首页 > Web前端 > JavaScript

原生js获取元素的class属性（获取class的所有元素）以及改变或添加calssName

2015-01-24 10:02 796 查看

今天在工作中,用到了设置className,因此查阅了一下资料，总结一下。

一、如何用原生js获取class属性

<div class = "dom'>
</div>

元素JS实现方法：

function $class(domclass)
{
var odiv = document.getElementsByTagName("*");
var aResult = []; //定义一个空数组，用来存放与目标className相同的元素
for(var i = 0; i<odiv.length; i++)
{//这个是遍历页面中所有元素然后拿他们的class进行对比。如果和我们传进来的domclass这个参数一样就把他放进数组 aResult中。
if(odiv[i].className == domclass)
{
aResult.push(oDiv[i]);   //获取到的元素推进数组中
}
return aResult;   //返回这个放进了domclass元素的数组
}
}
window.onload = function(){
alert($class('boom').length); //获取这些元素的个数
alert($class('boom')[0].className); //获取这些元素的第一个元素的className,其实都是一样的className.
}

用这个函数来获取就很简单了只需要var d = $class("dom");

这个函数的意思是：
var odiv = document.getElementsByTagName("*");
这句意思是获取页面中所有的DOM元素

二、js改变或添加className

<style type="text/css">
.newDiv {
font-weight: bold;
}
</style>

<script>
function clk() {
var parent = document.getElementById("parent");
// parent.className = parent.className + " newDiv";  //添加classname

parent.className = " newDiv";  //改变classname

}
</script>

</head>
<body>
<input type="button" value="click" onclick="clk();"/>
<div id="parent" class="google">
<div >child</div>
</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航