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

封装getByClass（JS获取class的方法封装为一个函数）

2017-10-11 17:30 866 查看

JS获取class的方法一：
普通版：
<script type="text/javascript">
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]);
  }
}

return aResult;
}
</script>

JS获取class的方法二：

完美版：

<!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>无标题文档</title>

<script>

function getByClass(oParent, sClass)

{

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

var aResult=[];

var re=new RegExp('\\b'+sClass+'\\b', 'i');

var i=0;

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

{

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

  //if(aEle[i].className.search(sClass)!=-1)

  if(re.test(aEle[i].className))

  {

   aResult.push(aEle[i]);

  }

}

return aResult;

}

window.onload=function ()

{

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

var aBox=getByClass(oUl, 'box');

var i=0;

for(i=0;i<aBox.length;i++)

{

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

}

};

</script>

</head>

<body>

<ul id="ul1">

<li></li>

<li class="box active"></li>

<li class="box"></li>

<li></li>

<li></li>

<li class="box"></li>

</ul>

</body>

</html>

标签: javascript 封装函数

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

标签：

相关文章推荐

新的分享

章节导航