<!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++0x语言新特性一览

    转自:http://blog.csdn.net/zwvista/article/details/2429781 原文请见http://en.wikipedia.org/wiki/C%2B%2B0x. ...

  2. Delphi xe5 手机开发经验(新手级别)

    Delphi xe5 手机开发经验(新手级别) http://diybbs.zol.com.cn/1/34037_699.html http://www.delphitop.com/html/jiqi ...

  3. percona-toolkit 之 【pt-summary】、【pt-mysql-summary】、【pt-config-diff】、【pt-variable-advisor】说明

    摘要: 通过下面的这些命令在接触到新的数据库服务器的时候能更好更快的了解服务器和数据库的状况. 1:pt-summary:查看系统摘要报告 执行: pt-summary 打印出来的信息包括:CPU.内 ...

  4. jQuery修改页面元素的属性

    作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...

  5. ajax与后台交互传输数据的工具类

    public class Result<T> implements Serializable { private static final long serialVersionUID = ...

  6. K3中添加的一条新数据，其在数据库中的位置

    最近研究将K3系统与生产管理系统结合起来,减少工作量,但如何确定其各自后台数据库的构成,其对应数据各自位于那张表内,总结了一下: 1.从百度搜索,查看表结构,然后找到目标表    另:K3数据库中单独 ...

  7. UVALive 4949 Risk（二分网络流、SAP）

    n个区域,每个区域有我方军队a[i],a[i]==0的区域表示敌方区域,输入邻接矩阵.问经过一次调兵,使得我方边界处(与敌军区域邻接的区域)士兵的最小值最大.输出该最大值.调兵从i->j仅当a[ ...

  8. codeforces 425C Sereja and Two Sequences（DP）

    题意读了好久才读懂....不知道怎么翻译好~~请自便~~~ http://codeforces.com/problemset/problem/425/C 看懂之后纠结好久...不会做...仍然是看题解 ...

  9. codeforces 558B. Amr and The Large Array 解题报告

    题目链接:http://codeforces.com/problemset/problem/558/B 题目意思:给出一个序列,然后找出出现次数最多,但区间占用长度最短的区间左右值. 由于是边读入边比 ...

  10. Linux rpm 命令参数使用详解［介绍和应用］

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包 二进制包(Binary)以及源代码包(Source)两 ...