不多说，直接上代码

// 使用 css 选择器获取元素对象    兼容性封装 Test Already.

function getElementsByCss(cssStr){

    if(document.querySelectorAll){

        return document.querySelectorAll(cssStr);

    }else{

        var style = document.createElement('style');

        var elements = [];

        var ele;

        document.documentElement.firstChild.appendChild(style);

        document._qsa = [];

        style.styleSheet.cssText = cssStr + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';

        window.scrollBy(0, 0);    // 滚动条滑到最上方

        style.parentNode.removeChild(style);

        while (document._qsa.length) {

            ele = document._qsa.shift();

            ele.style.removeAttribute('x-qsa');

            elements.push(ele);

        }

        document._qsa = null;

        return elements;

    }

}

实例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style rel="stylesheet" type="text/css" >

            #outer {

                margin: 0 auto;

                background: #ccc;

            }

            #middle_box {

                float: left;

                width: 800px;

                height: 800px;

                background: #eee;

            }

            #middle {

                width: 200px;

                height: 200px;

                margin: 0 auto;

                background: yellowgreen;

            }

            #middle .theTest1 {

                width: 50px;

                height: 50px;

                margin: 0 auto;

                background: pink;

            }

            #middle .theTest2 {

                width: 50px;

                height: 50px;

                margin: 0 auto;

                background: deeppink;

            }

            #left_box {

                float: left;

                width: 200px;

                height: 200px;

                background: skyblue;

            }

            #right_box {

                float: left;

                width: 200px;

                height: 200px;

                background: yellow;

            }

        </style>

    </head>

    <body>

        <div id="follow_mouse" class="unSelectedAble">

            <img src="./img/xiao.gif" />

        </div>

        <div id="outer" class="clearfix">

            <div id="left_box"></div>

            <div id="middle_box">

                <div id="middle">

                    <div class="clearfix theTest1"></div>

                    <div class="clearfix theTest2"></div>

                </div>

            </div>

            <div id="right_box"></div>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 使用 css 选择器获取元素对象    兼容性封装

            function getElementsByCss(cssStr){

                if(document.querySelectorAll){

                    return document.querySelectorAll(cssStr);

                }else{

                    var style = document.createElement('style');

                    var elements = [];

                    var ele;

                    document.documentElement.firstChild.appendChild(style);

                    document._qsa = [];

                    style.styleSheet.cssText = cssStr + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';

                    window.scrollBy(0, 0);    // 滚动条滑到最上方

                    style.parentNode.removeChild(style);

                    while (document._qsa.length) {

                        ele = document._qsa.shift();

                        ele.style.removeAttribute('x-qsa');

                        elements.push(ele);

                    }

                    document._qsa = null;

                    return elements;

                }

            }

            var the1 = getElementsByCss("#middle .theTest1")[0];

            var the2 = getElementsByCss("#middle .theTest2")[0];

            the1.style.backgroundColor = "red";

            the2.style.backgroundColor = "red";

        </script>

    </body>

</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. IDEA破解

    1. 官网下载 idea激活 进入 C:\Windows\System32\drivers\etc  编辑host文件  加入0.0.0.0 account.jetbrains.com  2.打开ID ...

  2. $\be$-QGE 的弱强唯一性

    在 [Zhao, Jihong; Liu, Qiao. Weak-strong uniqueness criterion for the $\beta$-generalized surface qua ...

  3. [物理学与PDEs]第1章习题13 静磁场的矢势在媒质交界面上的条件

    试讨论对静磁场的矢势, 如何决定其在媒质交界面上的条件. 解答: 由 $\rot{\bf A}={\bf B}$ 知 $$\bex \oint_l {\bf A}\cdot\rd {\bf l} =\ ...

  4. 散度、旋度与 Laplacian

    $$\bex -\lap {\bf u}=\rot \rot {\bf u}-\n \Div {\bf u}. \eex$$

  5. Mongodb注入

    0x01 Brief Description 作为nosql(not only sql)数据库的一种,mongodb很强大,很多企业也在用到.相对于sql数据库,nosql数据库有以下优点:简单便捷. ...

  6. input全选和取消全选

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  7. 大家都知道fastclick能解决300ms延迟，现在我们来看一下，使用方法

    1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...

  8. 【vue】路由配置

    一般组件我们会有全屏组件,或是在页面的某个部分显示组件,所以路由的第一层一般是全屏显示的,而在/目录下的组件为页面的某个部分显示的,通常需求是这样的,登录是全屏显示的,而普通页面是在页面的某个部分进行 ...

  9. Python3：几行代码实现阶乘

    阶乘:一个正整数的阶乘(factorial)是所有小于及等于该数的正整数的积,并且0的阶乘为1.自然数n的阶乘写作n!. #---------------------------------- 阶乘- ...

  10. Centos-6服务器源配置（使用阿里云的源镜像）

    首先在VM中安装从 https://mirrors.aliyun.com/centos/ 中下载好的centos镜像(这里以centos6.9 64 为例). 安装完成后先要进行备份  mv /etc ...