封装用className选元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ul1">
<li></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html>
<script>
// 参数:从哪个父级下选取元素,哪一个class元素
function getByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var i=0;
for(i=0;i<aEle.length;i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);//每次循环出来就存入aResult里面,push:数组后面添加新的元素。
}
}
return aResult;
}

//用法
window.onload = function () {
// 用className来选元素
var oUl = document.getElementById("ul1");
var aBox = getByClass(oUl,'box');//上面返回的return aResult是一个数组,所以需要下面循环出来,再一一添加样式
var i = 0;
for(i=0;i<aBox.length;i++){
aBox[i].style.background = "yellow";
}
}
</script>

总结,当然,这里用.box{background = "yellow"}也可以实现,如果出现为className来捆绑事件的话,可能会用到这个封装的小事件
posted @ 2016-10-26 15:11  最爱小虾  阅读(268)  评论(0编辑  收藏  举报