首页 > 代码库 > javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

2024-07-04 23:53:58   231人阅读

原文:javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

一、背景：一个表单中，要修改一些li中有class=box的样式，将它的background设置为red红色。
一般的做法是我们可以先找到父级元素 ，然后由父级元素找到所有相关tagName，最后，来一个if判断，如果class属性为box，则修改之

 var oUl = document.getElementById("ul1");                                  //加上它的上级元素，可以避免我们筛选出许多无用的节点出来
var aLi = oUl.getElementsByTagName("li");

html代码：

 <ul id="ul1">
           <li class="box"></li>           
           <li></li>
           <li class="box"></li>
           <li></li>
           <li class="box"></li>
 </ul>

 

一般做法的代码:

     <script>
              var oUl = document.getElementById("ul1");        //加上它的上级元素，可以避免我们筛选出许多无用的节点出来
              var aLi = oUl.getElementsByTagName("li");
              var i = 0;
              
              for(i =0; aLi.length; i++){
                     if(aLi[i].className == "box"){
                            aLi[i].style.background = "#FF9900";
                     }
              }              
       </script>

 

为了代码重用，将其封装成一个小函数，存入代码库，以便以后可以使用。
思路：查找className需要两个参数，一个数父级元素、一个是指定的class。通过父级元素，可以找到父级元素下的所有元素节点，有了这些元素节点呢，我们就可以获取到父级元素下的所有元素，最后通过if判断，并结合循环，把这些元素的class是指定值的遍历出来。
通过className灵活查找元素    函数封装版
<!--
           作者：1107989194@qq.com
           时间：2014-04-13
           描述：通过className灵活查找元素    函数封装版
       -->
       <script>
              function getByClass(oParent,sClass){
                     var aEle = oParent.getElementsByTagName(‘*‘);      //获取父级元素下的所有元素
                     var aResult = new Array();
                     for(var i =0; i<aEle.length; i++){
                           if(aEle[i].className == sClass){
                               aResult.push(aEle[i]);
                           }
                     }
                     return aResult;
              }
               
              window.onload = function(){
                  var oUl = document.getElementById(‘ul1‘);
                  var aBox = getByClass(oUl,‘box‘);
                  //获取到所有的class=box的属性后，进行修改 你想要的样式
                  for(var i =0; i<aBox.length; i++){
                         aBox[i].style.background = ‘red‘;
                         
                  }
              }
              
       </script>

 


联系
我们