<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         div{

             width: 100px;

             height: 100px;

             background: pink;

             margin: 10px;

         }

     </style>

 </head>

 <body>

 <div></div>

 <div class="demo"></div>

 <div class="test"></div>

 <div class="demo test one"></div>

 <div class="demo one"></div>

 <div></div>

 <div id="one">

     <div class="demo test one"></div>

     <div class="demo one"></div>

     <div class="test"></div>

     <div class="demo"></div>

     <div></div>

 </div>

 <div class="demo"></div>

 </body>

 </html>

 <script>

     // document.getElementsByClassName()方法存在兼容性问题。不支持IE6,7,8，因此需要对其兼容性进行封装；

     window.onload=function(){

         // 默认第一个应该是class

         function getClass(classname,id) {

             if(document.getElementsByClassName){

                 if(id)

                 {

                     var eleId=document.getElementById(id);

                     return eleId.getElementsByClassName(classname);

                 }

                 else{//没有id

                     return document.getElementsByClassName(classname);

                 }

             }

             // 不支持情况也分为有没有id

             if(id){

                 var eleId=document.getElementById(id);

                 var dom=eleId.getElementsByTagName('*');

             }else{

                 var dom=eleId.getElementsByTagName('*');

             }

             var arr=[];

             for(var i=0;i<dom.length;i++ ){

                 var txtarr=dom[i].className.split(' ');

                 for(var j=0;j<txtarr.length;j++){

                     if(txtarr[j].className==classname)

                     {

                         arr.push(dom[i]);

                     }

                 }

             }

             return arr;

         }

        // console.log(getClass('test','one'));

         var aa=getClass('test','one');

         for(var i=0;i<aa.length;i++){

             aa[i].style.backgroundColor='purple';

         }

     }

 </script>

给class添加id封装的更多相关文章

  1. 如何添加自己封装的代码到Cocoapod

    这两天学习了如何添加自己封装的代码到Cocoapod中 以下是我这两天遇到的各种坑: 旧的方法:  http://my.oschina.net/u/727843/blog/392784 这个看看可以大 ...

  2. EasyUI实现更换主题能过样式添加id实现

    EasyUI实现更换主题能过样式添加id实现,将原来的样式值添加到cookie中保存,这样下次浏览器访问时,就是我们原来选择的样式! 首先将easyui的样式文件加入一个ID,这里命名为easyuiT ...

  3. eclipse android开发，文本编辑xml文件，给控件添加ID后，R.java，不自动的问题。

    直接编辑xml文件给控件添加id,不自动更新.原来的id写法:@id/et_tel 然后改写成这样:@+id/et_tel  然后就好了!操`1

  4. 在已有数据的表中添加id字段并且自增

    各位大牛,小弟在开发过程中,遇到了这样一个问题,由于新功能的增加需要使原有的一张表的结构作出调整,需要添加一个id主键字段,但是因为表里有很多数据了,所以,怎样才能添加这个字段,并且使原有的数据也能够 ...

  5. vue循环遍历给div添加id

    html部分 <div class="img-preview" v-for="(img,i) of list" :key="img.imageK ...

  6. js动态添加id

    <script type="text/javascript"> function add_id(){ var dlall=document.getElementsByT ...

  7. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  8. DOM 中的 id 属性会往全局变量中添加 id 值的变量

    一直没注意到这个坑,今天看<你不知道的 JavaScript>中提到了,今后需要注意. <!DOCTYPE html> <html> <head> &l ...

  9. 黄聪：Jquery+DataTables插件，如何在ajax调用服务器数据后，自动给tr添加id属性

    http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...

随机推荐

  1. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...

  2. 判断URL是否支持断点续传？

    #python #xiaodeng #判断URL是否支持断点续传? import urllib2 req = urllib2.Request('http://ftp.ubuntu.com/') req ...

  3. MYSQL在Win下免安装zip

    mysql对于Win测试简单zip安装即可了解my.in配置文件的妙处(show variables),本地搭建mysql服务测试引擎! 01.下载 https://dev.mysql.com/dow ...

  4. PLSQL常用配置

    峰回路转,此乃常客! 01.PL/SQL Developer记住登陆密码 为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法: PL/SQL Develop ...

  5. aop 注解 开启spring自带的事务

    一些基本知识 可以 http://jinnianshilongnian.iteye.com/blog/1415606 serviceImpl.java package cn.us.service.im ...

  6. js hasChildNodes()指针对元素节点子节点多个的话 true

    <select multiple size="2"> <option value="bj">北京</option> < ...

  7. leetcode689:Maximum Sum of 3 Non-Overlapping Subarrays

    给定数组a[N](每个元素都是正整数)和一个整数k(k小于等于N/3),要求从数组a中找出不相交的三个数组,每个数组长度都为k,使得三个数组之和最大.输出(i,j,k)表示三个子数组的开始下标,如果有 ...

  8. 推荐系统之 BPR 算法及 Librec的BPR算法实现【1】

    [推荐系统之 BPR 算法] 1.关于BPR的论文原文: BPR: Bayesian Personalized Ranking from Implicit Feedback 2.参考1:论文快读 - ...

  9. POJ 3691 DNA repair （DP+AC自动机）

    DNA repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4815   Accepted: 2237 Descri ...

  10. python核心编程--笔记（不定时跟新）(转)

    的解释器options: 1.1 –d   提供调试输出 1.2 –O   生成优化的字节码(生成.pyo文件) 1.3 –S   不导入site模块以在启动时查找python路径 1.4 –v   ...