取外部css:
Mozilla 用 document.styleSheets[0].cssRules;
IE 用 document.styleSheets[0].rules;问题是: 360浏览器该用哪个属性 cssRules和rules 都不支持。 都报错误,说接受的值为null.求解!
Mozilla 用 document.styleSheets[0].cssRules;
IE 用 document.styleSheets[0].rules;问题是: 360浏览器该用哪个属性 cssRules和rules 都不支持。 都报错误,说接受的值为null.求解!
<html>
<head>
<meta charset="gb2312" />
<title></title>
</head>
<body>
<div class="a">111111111</div>
<div class="b">111111111</div>
<div class="c">111111111</div>
<script>
function $(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
;(function(w, d){
var ie = !+[1,];
var o = null;
var styleSheet = function(){
this.init();
};
styleSheet.prototype = {
init: function(){
var h = d.getElementsByTagName('head')[0];
var s = d.createElement('style');
h.appendChild(s);
o = d.styleSheets[d.styleSheets.length-1];
},
add: function(selector, style){
ie ?
o.addRule(selector, style)
:
o.insertRule(selector + "{" + style + "}", o.cssRules.length);
},
del: function(index){
ie ?
o.removeRule(index)
:
o.deleteRule(index);
},
getRules: function(){
return ie ?
o.rules
:
o.cssRules;
},
getRule: function(selector){
var rules = this.getRules();
for(var i = 0, len = rules.length; i < len; i++){
var r = rules[i];
if( r.selectorText == selector ){
return r;
}
}
return null;
}
}
w.styleSheet = styleSheet;
})(window, document);
var s = new styleSheet;
s.add('.a', 'color:red;')
s.add('.a', 'font-size:111px;')
s.add('.a', 'font-size:11px;')
s.add('.b', 'color:blue;')
//s.del(0)
alert( s.getRule('.a').style['color'] )
</script>
</body>
</html>
我表哥都给我提醒用jq.
我就想用最原始的解决, 要是不能解决, 我在考虑用jq。 等我回复!