简单地封装一个className

最新推荐文章于 2019-07-29 16:58:17 发布

全栈技术圈

最新推荐文章于 2019-07-29 16:58:17 发布

阅读量668

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chen_wen_xian/article/details/9071103

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>封装className文档</title>
<script>
//封装className的
function getByClass(oParent,sClass){ //oParent表示：父级元素，className表示：需要获得oParent（父级元素）里面的class类的类名为className

var aEle=oParent.getElementsByTagName('*');

var aResult=[]; //用来保存父级元素（oParent）里面的所有class类（className）

for(var i=0; i<aEle.length; i++){

if(aEle[i].className==sClass){

aResult.push(aEle[i]);

}

return aResult;//返回在oParent（父级元素）里面的class类的类名为className的数组

}
window.οnlοad=function(){

/*------使用getByClass（）--------*/

var oUl=document.getElementById('ul1');

var classWen=getByClass(oUl,'wen');

for(var i=0; i<classWen.length; i++){

classWen[i].style.background='red';

}

}

</script>
</head>
<body>
<ul id="ul1">
<li class="wen">f</li>
<li>f</li>
<li class="wen">f</li>
<li>f</li>
<li class="wen">f</li>
<li>f</li>
<li class="wen">f</li>
<li>f</li>
<li class="wen">f</li>
</ul>
</body>

</html>

效果图：