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