不多说，直接上代码

// 使用 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. DNS服务器 知识点

    DNS服务器: 1.DNS: Domain Name Service 域 名字 服务 2.域名组成:(树形结构) 根域 .顶级域 国家顶级域 cn jp hk uk 商业顶级域 com 商业机构 go ...

  2. CF1119C Ramesses and Corner Inversion

    题目地址:CF1119C Ramesses and Corner Inversion 将两个矩阵异或起来,为 \(1\) 的位置就是需要修改的位置 注意到每一次操作都会导致两行和两列上有两个数被修改 ...

  3. C语言网 蓝桥杯 1117K-进制数

    这是一道较难的题目,我刚开始用排列组合的方式来做,并没有做出来,故运用了的深搜算法. 深搜算法的概念: 选其中一条路,遍历完成后,逐步返回直至全部遍历,最后返回起点. 解题思路 : 题目中对零的个数没 ...

  4. Elasticsearch 安装和配置

      1. 下载并解压   wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.0.tar.gz   ...

  5. flume taidir to kafkasink

    flume的数据源采用taiDir,sink类型选择kafka类型 测试目标:flume监控某一个目录的日志文件,并将文件存储到kafka中,在kafka的消费端可以实现数据的消费 dip005.di ...

  6. 使用virtualenvwrapper模块管理python虚拟环境

    1.pip安装virtualenvwrapper [root@localhost ~]# pip install virtualenvwrapper # 安装virtualenvwrapper [ro ...

  7. bzoj 2780

    后缀自动机的应用 首先我们观察到:如果一个询问串的答案不为0,那么这个串一定是至少一个模式串的子串 如果只有一个模式串,那么这个问题可以简单地用什么东西解决掉(比如普通后缀自动机) 而这里有很多模式串 ...

  8. 微信小程序语音与讯飞语音识别接口（Java），Kronopath/SILKCodec，ffmpeg处理silk，pcm，wav转换

    项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 首先去讯飞开放平台中申请开通语音识别功能 在这里面下载sdk,然后解压,注意appid与sdk是关联的,appid在初始 ...

  9. Java Spring Boot VS .NetCore （十） Java Interceptor vs .NetCore Interceptor

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  10. 【SQL】 MySql与SqlServer差异比较(MySql踩坑全集)

    本文主要记录将数据库从SqlServer移植到MySql的过程中,发现的各种坑爹问题.以SqlServer为主,记录MySql的差异性. 一.IF语句 首先MySql中的的IF语法不同. IF Con ...