我读过this link,其中Cristoph创建了一个添加样式表的功能。我认为这是一个绝妙的主意,但不能正常工作。例如:
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}
document.createStyleSheet( 'css/test.css' );
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
console.log( sheet );
当我添加外部文件然后添加没有名称的样式表时,该功能至少在chrome中无法正常工作。在工作表变量中存储了一个默认的chrome样式表:
CSSStyleSheet {rules: CSSRuleList, cssRules: CSSRuleList, ownerRule: null, media: MediaList, title: null…}
cssRules: CSSRuleList
0: CSSStyleRule
1: CSSStyleRule
2: CSSStyleRule
3: CSSStyleRule
...
627: CSSStyleRule
628: CSSStyleRule
length: 629
__proto__: CSSRuleList
disabled: false
href: null
media: MediaList
ownerNode: style
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"
__proto__: CSSStyleSheet
我不知道为什么会出现这个问题。有谁知道吗?
编辑:澄清源代码的概念。
谢谢!