js封装class

来源:互联网 发布:linux boot分区 编辑:程序博客网 时间:2024/06/09 21:38

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><html><head lang="zh-CN">    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title></title>    <script>        function getByClass(oParent,sClass){            var aEle = document.getElementsByTagName('*');            var aResult = [];            var re = new RegExp('\\b'+sClass+'\\b');            var i = 0;            for(i=0;i<aEle.length;i++){                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>1</li>    <li class="box active">2</li>    <li class="box">3</li>    <li>4</li>    <li>5</li>    <li class="box">6</li></ul></body></html>
0 0