不多说，直接上代码

// 使用 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. Client-Side Template Injection with AngularJS

    <html> <head> <meta charset="utf-8"> <script src="https://cdn.bo ...

  2. 【js课设】电子画板01

    这学期web开发课的课设选了电子画板课题.(人家本来想做富文本编辑器的嘛然鹅老师在第二版里把这题删掉了｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡) 主要考虑的有[界面美观][画笔类型][画布分层]这三个点了. [界面美 ...

  3. RoIPooling

    . 代码: template <typename Dtype> void ROIPoolingLayer<Dtype>::Forward_cpu(const vector< ...

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

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

  5. (三)Java工程化--Git起步

    GIT学习参考:https://git-scm.com/book/zh/v2 版本控制 版本控制记录了一个或若干文件的历史变化,便于今后查阅,恢复. 三类版本控制系统 本地版本控制系统 RCS : 本 ...

  6. POJ 3347 Kadj Squares （计算几何）

    题目: Description In this problem, you are given a sequence S1, S2, ..., Sn of squares of different si ...

  7. python学习第25天

    异常处理 什么是异常?什么是错误? 1,程序中难免出现错误. 错误主要分为两种: 1,语法错误 语法错误是根本上的错误,无法通过PYTHON解释器.完全无法执行,是在程序中不应该出现的错误.无法进行异 ...

  8. H2 Database Engine

    http://www.h2database.com/html/main.html H2 Database Engine Welcome to H2, the Java SQL database. Th ...

  9. Groovy闭包

    定义 闭包(Closure)是一种数据类型,它代表一段可执行的代码.它可以作为方法的参数,或者返回值,也可以独立运行,定义如下: def xxx = {parameters -> code}   ...

  10. linun 乌班图 vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2) 但是 2:7.3.429-2ubuntu2.1 正要被安装

    sudo apt-get purge vim-common sudo apt-get updatesudo apt-get upgradesudo apt-get install vim