不多说，直接上代码
// 使用 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>