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

封装用className选元素的更多相关文章

  1. Javascript通过className选择元素

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  3. 根据ClassName获取元素节点

    功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:

  4. angularjs 给封装的模态框元素传值，和实现兄弟传值

    本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...

  5. juqery 点击张三触发李四的方法 trigger(); 和 被选元素前插入指定的内容的方法 brfore();

    $('.zc_fabu_img_1').on('click',function(){ $("#upImg img").trigger("click"); }) ...

  6. toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

    toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为 ...

  7. js根据className获取元素封装

    虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ ...

  8. 如何根据元素的className获取元素？

    getElementsByClassName()是HTML5 新增的DOM API.IE8以下不支持 我们知道,原生的方法,是getElementById()和getElementsByTagName ...

  9. js实现鼠标拖动框选元素小狗

    方法一: <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;w ...

随机推荐

  1. C++复制控制

    1.复制构造函数可用于: (1)根据另一个同类型的对象显示或隐式初始化一个对象 string str1="test";   //隐式 string str2=str1; //显示 ...

  2. DATEADD和DATEDIFF函数、其他日期处理方法 、已打开的端口、FORMAT函数

    DATEADD和DATEDIFF函数.其他日期处理方法 .已打开的端口.FORMAT函数 DATEADD和DATEDIFF函数.其他日期处理方法 .已打开的端口.Format函数 KeyLife富翁笔 ...

  3. Selenium FF WebDriver 遍历所有链接（另类爬虫）

    请看这个页面,我想要找到某个公告的内容,必须一个一个打开链接,尼玛好多啊. 于是,我机智的使用selenium打开每一个链接,然后把公告内容写入txt 那需要做一下步奏 1.依次打开一个公告 2.切换 ...

  4. perl 二维数组

    perl没有真正的二维数组,所谓的二维数组其实是把一维数组以引用的方式放到另外一个一维数组. 二维数组定义 : my @array1=([1,2],[3,4],[45,9],[66,-5]);     ...

  5. 将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间

    以下代码: //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/ ...

  6. 【python】正则中的group()

    来源:http://www.cnblogs.com/kaituorensheng/archive/2012/08/20/2648209.html 正则表达式中,group()用来提出分组截获的字符串, ...

  7. (2016弱校联盟十一专场10.5) F. Fibonacci of Fibonacci

    题目链接 题目大意就是这个,先找出下标的循环节,再快速幂对20160519取余就行了. 找出下标循环节: #include <cstdio> #include <iostream&g ...

  8. poj 3734 Blocks 快速幂+费马小定理+组合数学

    题目链接 题意:有一排砖,可以染红蓝绿黄四种不同的颜色,要求红和绿两种颜色砖的个数都是偶数,问一共有多少种方案,结果对10007取余. 题解:刚看这道题第一感觉是组合数学,正向推了一会还没等推出来队友 ...

  9. rsync.conf详解

    1.在服务端编辑配置文件 [root@game_intf ~]# more /etc/rsyncd.conf port=8730 log file=/var/log/rsync.log pid fil ...

  10. September 20th 2016 Week 39th Tuesday

    Failure is not fatal, but failure to change might be. 失败并不致命,但无法改变却可能是致命的. I need change, but it see ...