不多说，直接上代码

// 使用 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. Entity Framework入门教程（7)--- EF中的查询方法

    这里主要介绍两种查询方法 Linq to entity(L2E)和Sql 1.L2E查询 L2E查询时可以使用linq query语法,或者lambda表达式,默认返回的类型是IQueryable,( ...

  2. C#开发Windows服务详细流程

    1.Windows服务简单介绍 Windows服务程序是在Windows操作系统下能完成特定功能的可执行的应用程序,主要用于长时间运行的功能或者执行定时任务.一般情况下,用户不能通过用户界面来安装和启 ...

  3. RubyMine 2017.3.2破解教程

    下载地址:http://www.3322.cc/soft/35519.html RubyMine 2017.3.2破解版是一款专为Ruby和Rails开发者准备的IDE(被誉为最智能的Ruby和Rai ...

  4. Java子线程中操作主线程Private级别数据

    两个类分别如下: <pre name="code" class="java">package Demo2; import java.util.*; ...

  5. [Android] Android 实现类似 今日头条 视频播放列表

    演示实例如下: Talk is cheap. Show me the code 话不多说,代码在这里下载! https://github.com/wukong1688/Android_BaseVide ...

  6. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

  7. 使用PHP做分页查询（查询结果也显示为分页）

    1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单.(加上条件,实现目标结果.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. 循环语句（for，while，do……while），方法概述

    循环结构 分类:for,while,do……while (1)for语句 格式: for(初始化表达式:条件表达式:循环后的操作表达式){ 循环体: } 执行流程: a.执行初始化语句 b.执行判断条 ...

  9. TED学习笔记

    20180621(如何做得更好) 多一些探索,询问,聆听,奋斗,成就自己,比一味的做事儿有效的多. 1.刻意让自己的生活在两个区域交替:(1)学习区Learning Zero (2)执行区Perfor ...

  10. ES6走一波 数组的扩展

    Array flat 数组实例的扁平化方法(浏览器支持不佳) 建议使用 lodash的 flatten