js关于浏览器document对象属性支持问题取外部css:Mozilla 用 document.styleSheets[0].cssRulesIE 用 doc
js关于浏览器document对象属性支持问题
取外部css:
Mozilla 用 document.styleSheets[0].cssRules;
IE 用 document.styleSheets[0].rules;
问题是: 360浏览器该用哪个属性 cssRules和rules 都不支持。 都报错误,说接受的值为null.
求解!
[解决办法]
不好意思,没看到是取外部CSS
肯定跨域了,有些浏览器是可读的如ff,ie7,8;有些是不可读写的,如safari,chrome,opera
[解决办法]
是360还有基于 mshtml 和webkit的 版本
楼主试试
- HTML code
<!DOCTYPE HTML><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> 