<!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. ConcurrentHashMap并不是绝对线程安全的

    import java.util.HashMap; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; publi ...

  2. uniq命令 （转）

    uniq命令可以去除排序过的文件中的重复行,因此uniq经常和sort合用.也就是说,为了使uniq起作用,所有的重复行必须是相邻的. uniq语法 [root@www ~]# uniq [-icu] ...

  3. Divisibility by Eight

    把当前数删除几位然后能够整除与8 那么可得知大于3位数的推断能否整除于八的条件是(n%1000)%8==0 能够得出我们的结论:仅仅须要枚举后三位后两位后一位就可以知道是否可整除于8 #include ...

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

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

  5. oracle 批量更新之将一个表的数据批量更新至另一个表

      oracle 批量更新之将一个表的数据批量更新至另一个表 CreationTime--2018年7月3日17点38分 Author:Marydon Oracle 将一个表的指定字段的值更新至另一个 ...

  6. Intellij IDEA 设置代码着色

    从visual studio到Eclipse再到Intllij IDEA,其实每个编译器都有自己的风格,但是就美观上来说,个人觉得还是visual studio的代码着色比较美观,exlipse次之, ...

  7. PHP扩展的基本结构

    1.下载php源码 git clone https://github.com/php/php-src.git  2,创建扩展 cd php-src/ext/ ./ext_skel --extname= ...

  8. [CXF REST标准实战系列] 二、Spring4.0 整合 CXF3.0,实现测试接口(转)

    转自:[CXF REST标准实战系列] 二.Spring4.0 整合 CXF3.0,实现测试接口 文章Points: 1.介绍RESTful架构风格 2.Spring配置CXF 3.三层初设计,实现W ...

  9. HDUOJ---Piggy-Bank

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. HDUOJ --2566

    统计硬币 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...