不多说，直接上代码

// 使用 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. ACM-ICPC 2018 徐州赛区网络预赛 A Hard to prepare(递推)

    https://nanti.jisuanke.com/t/31453 题目 有n个格子拉成一个环,给你k,你能使用任意个数的0 ~ 2^k - 1,规定操作 i XNOR j 为~(i  ^  j), ...

  2. 如何清理Docker占用的磁盘空间?(转载)

    本文转载自https://blog.fundebug.com/2018/01/10/how-to-clean-docker-disk/ , 感谢原作者. 摘要:用了Docker,好处挺多的,但是有一个 ...

  3. 用 Mathematica 获取图片的 RGB 三基色

    ColorConvert[*, "RGB"] // InputForm 其中 * 表示你把你的图片拖入 Mathematica 中.

  4. 5组I/O函数的比较

  5. npm cnpm yarn

    npm 如何下载指定版本的组件 先确保文件目录下含有 package.json 文件, 没有的话,可以通过 npm init 创建, 然后只需要在组件的后面加上 @2.8.1 版本号即可, 例如:re ...

  6. 后台挂载/卸载程序[Linux/Windows]

    后台挂载应用程序 即使关闭掉控制台窗口,该程序的进程也将会一直运行下去 #Windows 1.编写bat命令文件[形如:a.bat] 2.cmd执行:start /b a.bat #Linux noh ...

  7. pip 安装问题

    同时安装了Python2 和Python3的情况下,由于我的电脑默认的是使用Python3,pip的时候直接就安装在3上了,为了让2也安装,办法之一就是在安装python2的路径下比如,D:\Anac ...

  8. JS中some(),every(),forEach(),map(),filter()区别

    JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了. 刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深 ...

  9. 网络学习day03_IP地址概述与应用

    IP地址 IP地址的定义及分类 主机唯一的标识,保证主机间正常通信 一种网络编码,用来确定网络中一个节点 IP地址是一个32位的二进制数 常见的IP地址,分为IPv4与IPv6两大类. ipv4的形式 ...

  10. pow()函数结果强制转化为int造成误差的分析

    开发环境:codeblocks,编译器gcc 在计算102时调用pow(10, 2),再强制类型转换为int类型后输出: printf(,)); 得到的结果却是:99 这是因为 double pow( ...