不多说，直接上代码

  1. // 使用 css 选择器获取元素对象    兼容性封装 Test Already.
  2. function getElementsByCss(cssStr){
  3.     if(document.querySelectorAll){
  4.         return document.querySelectorAll(cssStr);
  5.     }else{
  6.         var style = document.createElement('style');
  7.         var elements = [];
  8.         var ele;
  9.  
  10.         document.documentElement.firstChild.appendChild(style);
  11.         document._qsa = [];
  12.  
  13.         style.styleSheet.cssText = cssStr + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
  14.         window.scrollBy(0, 0);    // 滚动条滑到最上方
  15.         style.parentNode.removeChild(style);
  16.  
  17.         while (document._qsa.length) {
  18.             ele = document._qsa.shift();
  19.             ele.style.removeAttribute('x-qsa');
  20.             elements.push(ele);
  21.         }
  22.         document._qsa = null;
  23.         return elements;
  24.     }
  25. }

实例代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title></title>
  6.  
  7.         <link rel="stylesheet" type="text/css" href="./css/index.css" />
  8.  
  9.         <script type="text/javascript" src="./js/kjfFunctions.js"></script>
  10.         <script type="text/javascript" src="./js/index.js"></script>
  11.  
  12.         <style rel="stylesheet" type="text/css" >
  13.             #outer {
  14.                 margin: 0 auto;
  15.  
  16.                 background: #ccc;
  17.             }
  18.  
  19.             #middle_box {
  20.                 float: left;
  21.                 width: 800px;
  22.                 height: 800px;
  23.  
  24.                 background: #eee;
  25.             }
  26.  
  27.             #middle {
  28.                 width: 200px;
  29.                 height: 200px;
  30.                 margin: 0 auto;
  31.  
  32.                 background: yellowgreen;
  33.             }
  34.  
  35.             #middle .theTest1 {
  36.                 width: 50px;
  37.                 height: 50px;
  38.                 margin: 0 auto;
  39.  
  40.                 background: pink;
  41.             }
  42.  
  43.             #middle .theTest2 {
  44.                 width: 50px;
  45.                 height: 50px;
  46.                 margin: 0 auto;
  47.  
  48.                 background: deeppink;
  49.             }
  50.  
  51.             #left_box {
  52.                 float: left;
  53.                 width: 200px;
  54.                 height: 200px;
  55.  
  56.                 background: skyblue;
  57.             }
  58.  
  59.             #right_box {
  60.                 float: left;
  61.                 width: 200px;
  62.                 height: 200px;
  63.  
  64.                 background: yellow;
  65.             }
  66.  
  67.         </style>
  68.     </head>
  69.  
  70.     <body>
  71.         <div id="follow_mouse" class="unSelectedAble">
  72.             <img src="./img/xiao.gif" />
  73.         </div>
  74.  
  75.         <div id="outer" class="clearfix">
  76.  
  77.             <div id="left_box"></div>
  78.             <div id="middle_box">
  79.                 <div id="middle">
  80.                     <div class="clearfix theTest1"></div>
  81.                     <div class="clearfix theTest2"></div>
  82.                 </div>
  83.             </div>
  84.             <div id="right_box"></div>
  85.         </div>
  86.  
  87.         <!-- javascript 代码 -->
  88.         <script type="text/javascript">
  89.  
  90.             // 使用 css 选择器获取元素对象    兼容性封装
  91.             function getElementsByCss(cssStr){
  92.                 if(document.querySelectorAll){
  93.                     return document.querySelectorAll(cssStr);
  94.                 }else{
  95.                     var style = document.createElement('style');
  96.                     var elements = [];
  97.                     var ele;
  98.  
  99.                     document.documentElement.firstChild.appendChild(style);
  100.                     document._qsa = [];
  101.  
  102.                     style.styleSheet.cssText = cssStr + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
  103.                     window.scrollBy(0, 0);    // 滚动条滑到最上方
  104.                     style.parentNode.removeChild(style);
  105.  
  106.                     while (document._qsa.length) {
  107.                         ele = document._qsa.shift();
  108.                         ele.style.removeAttribute('x-qsa');
  109.                         elements.push(ele);
  110.                     }
  111.                     document._qsa = null;
  112.                     return elements;
  113.                 }
  114.             }
  115.  
  116.             var the1 = getElementsByCss("#middle .theTest1")[0];
  117.             var the2 = getElementsByCss("#middle .theTest2")[0];
  118.  
  119.             the1.style.backgroundColor = "red";
  120.             the2.style.backgroundColor = "red";
  121.         </script>
  122.     </body>
  123. </html>

document.querySelectorAll() 兼容 IE6的更多相关文章

  1. JavaScript简单分页，兼容IE6，~3KB

    简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...

  2. sizzle分析记录：关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  3. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  4. 表单美化-原生javascript和jQuery多选按钮（兼容IE6）

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  5. PNG兼容IE6解决方法

    虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p> E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法 ...

  6. html5标签兼容ie6，7，8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  7. 兼容IE6的页面底部固定层CSS代码

    有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码.如下 ...

  8. 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9

    <select class="b-select" id="location-province" name="Province" def ...

  9. 浮动层固定兼容IE6 position:fixed的最佳解决方案

    第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...

随机推荐

  1. ZooKeeper-集群模式安装

    下载地址:https://zookeeper.apache.org/releases.html 至少需要准备三台节点(这里为h136.h138.h140),ZooKeeper 需要 JDK,关于 JD ...

  2. NOI-OJ 2.2 ID:6261 汉诺塔

    思路 汉诺塔是递归思想最经典的例子,通过递归不断缩小问题,将n个盘子的问题简化n-1个,直至1个. 三个盘子,分别为A:from,B:to,C:by(A为起点盘,B为目标盘,C为中转盘) 过程 将1- ...

  3. 第十三节：Lambda、linq、SQL的相爱相杀(2)

    一. Linq开篇 1.Where用法 linq中where的用法与SQL中where的用法基本一致. #region 01-where用法 { //1. where用法 //1.1 查询账号为adm ...

  4. [再寄小读者之数学篇](2014-06-23 Gronwall-type inequality)

    Suppose that $$\bex \cfrac{\rd f}{\rd t}+h\leq gf\quad (f,g,h\geq 0,\ t\in [0,T]). \eex$$ Then for $ ...

  5. [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.3 媒质中电磁场量的表示

    1. 电磁能量密度 $$\bex \cfrac{1}{2}({\bf E}\cdot{\bf D}+{\bf B}\cdot{\bf H}). \eex$$ 2. 电磁能量流密度向量 $$\bex { ...

  6. Java(4)switch选择结构

    一.switch结构(开关语句)的语法 switch(表达式 ){--->类型为int.char case  常量1 :--->case 结构可以有多个 //语句块1 break;---& ...

  7. vue之vuex学习

    知识点一:vuex是状态管理器(单向数据流) 每个Vuex应用程序的核心是商店.“商店”基本上是一个容纳您的应用程序状态的容器.有两件事使Vuex商店与普通的全局对象不同: Vuex商店是被动的.当V ...

  8. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  9. IEnumerable<T>和IQueryable<T>区别

    LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...

  10. Windows 下安装Git工具及基础使用

    Git简介 git是很好一个工具使用,可以执行liunx命令,有git环境后windows系统就可以进行shell命令操作,就可以添加其他liunx辅助软件进行执行,git也代码库管理工具,无论是上传 ...