<!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. MySQL优化之——权限管理

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46763767 在mysql数据库中,有mysql_install_db脚本初始化权 ...

  2. highstock使用案例（异步请求，懒加载）

    jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...

  3. 打开Activity时，不自动显示(弹出)虚拟键盘

    打开Activity时,不自动显示(弹出)虚拟键盘 在AndroidManifest.xml文件中<activity>标签中添加属性 android:windowSoftInputMode ...

  4. 【laravel5.4】laravel5.4系列之生成_ide_helper.php文件

    在laravle中使用代码自动补全,比较方便开发,于是这边找到了相关的办法 在laravel配置完好的情况下,同时安装好了composer. 进入代码的根目录执行 composer require b ...

  5. Web Service基础——规范及三要素

    1. Java中的Web Service规范 Java 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC).JAX-RS.JAXM&SAAJ(废弃). 1.1 JAX- ...

  6. vs.net使用技巧

    1.快捷键收缩和展开代码段 i. Ctrl-M-O   折叠所有方法 ii. Ctrl-M-P   展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M   折叠或展开当前方法 i ...

  7. UpdatePanel的用法详解

    摘自:http://www.cnblogs.com/shangxia/articles/2281782.html 一.UpdatePanel的结构 <asp:ScriptManager ID=& ...

  8. ASP.NET#LinqDataSource控件配置对象模型时遇到的问题

    使用LinqDataSource控件时,配置数据源的时候,发现没有DataContext对象可选,但已通过可视化操作完成了对象模型的建立.这个时候,可以通过现在Default.aspx.cs文件中做如 ...

  9. JavaScript-event参数传递详解

    onmouseover="over(event)" onmouseout="out(event)" onclick="change(event)&qu ...

  10. SqlServer强制断开数据库已有连接的方法(转)

    在master数据库中执行如下代码 declare @i INT  declare cur cursor for select spid from sysprocesses where db_name ...