document.querySelectorAll() 兼容 IE6

不多说，直接上代码

 

// 使用 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>

 

posted @ 2018-10-29 16:57  耶梦加德  阅读(1019)  评论(0)  编辑  收藏  举报