<!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. HibernateDaoSupport与JdbcDaoSupport

    Dao 的支持类可以有好多,如: JdbcDaoSupport , HibernateDaoSupport ,JdoDaoSupport等,下面对最常用的HibernateDaoSupport与Jdb ...

  2. crontab 格式

  3. Content-Length实体的大小

    •15.2 Content-Length实体的大小 Content-Length首部指出了报文中实体主体的字节大小,这个大小包含了所有内容的编码,如对文本进行gzip压缩的话,那么Content-Le ...

  4. 【转载】PL/SQL配置连接ORACLE

    一.需安装ORACL客户端. 配置文件路径: E:\Oracle\product\10.1.0\Client_3\NETWORK\ADMIN\tnsnames.ora 内容如下: # TNSNAMES ...

  5. HDUOJ------（1272）小希的迷宫

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  6. Mybatis中的@SelectKey注解

    一.创建Maven项目 在pom.xml中,添加mybatis依赖,mysql-jdbc依赖,把编译版本改为1.8 你问,为啥mybatis不会自动依赖mysql-jdbc,需要手动写明?答:因为my ...

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

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

  8. 页面livereload width grunt

    step-1.   安装node 环境 step-2.  npm  install grunt-cli  \ grunt http://www.gruntjs.net/docs/getting-sta ...

  9. SQL中 OVER(PARTITION BY)

    OVER(PARTITION BY)函数介绍 开窗函数               Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返 ...

  10. jquery插件--ajaxfileupload.js上传文件原理分析

    英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...