封装用className选元素

最新推荐文章于 2025-09-02 04:59:36 发布

转载最新推荐文章于 2025-09-02 04:59:36 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wang715100018066/p/6000473.html

本文介绍了一种使用JavaScript自定义函数getByClass选取指定class名的DOM元素的方法，并通过实例展示了如何为选中的元素添加背景颜色。这种方法适用于需要通过class名进行元素选择及样式操作的场景。

<!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来捆绑事件的话，可能会用到这个封装的小事件

转载于:https://www.cnblogs.com/wang715100018066/p/6000473.html