<!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. 1z0-052 q209_1

    1: You perform differential incremental level 1 backups of your database on each working day and lev ...

  2. eclipse查看源码失败总结

    之前看的网上查看源码的方法,查看了JDK,只是知其然不知所以然. 后来发现要是查看其他源码,总是查看失败. 最开始每次点击Attach  Source包到所要查看源码的jar包,但是还是这样. 但是依 ...

  3. 23、java 通过System.getProperties()获取系统参数

    1.java的System.getProperty()方法可以获取的值 java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor. ...

  4. A链接IE6、7下失效场景及解决方案

    1.当img元素包含在多个层级关系里时,只要触发了img元素的父元素的hasLayout,那么就会造成在IE6\7下A标签失效. <!DOCTYPE html PUBLIC "-//W ...

  5. CAS 5.1.x 的搭建和使用（一）—— 通过Overlay搭建服务端

    CAS单点登录系列: CAS 5.1.x 的搭建和使用(一)—— 通过Overlay搭建服务端 CAS5.1.x 的搭建和使用(二)—— 通过Overlay搭建服务端-其它配置说明 CAS5.1.x ...

  6. 商家 APP 如何接入新版支付宝支付，老版本商家如何升级

    代码地址如下:http://www.demodashi.com/demo/14006.html 前言 支付宝移动支付2.0版本对比1.0版本做了较大更新,新申请的商家都需要采用最新2.0版本 SDK ...

  7. Android WiFi开发

    概述 介绍Android WiFi的扫描.连接.信息.以及WiFi热点等等的实现,并用代码实现. 详细 代码下载:http://www.demodashi.com/demo/10660.html 一. ...

  8. 从一个Idea到产品需要经历哪些阶段？

    从一个Idea到产品需要经历哪些阶段? Lkey 07月19日 16:520 现实工作中,不免遇到这样的情况.什么嘛?老板(领导)又有新想法了?又有其他Idea了?心里一阵骂娘xxxxxx.或者产品负 ...

  9. Oracle PUP（PRODUCT_USER_PROFILE）配置和使用

    近期在翻Oracle SQLPLUS官方文档,在讲SQLPLUS Security章节介绍了PUP这个机制.借此.我来使用下面: PUP(PRODUCT_USER_PROFILE)介绍   PRODU ...

  10. 【QRcode二维码】：使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...