javascript - 获取 <style> 原型(prototype)，CSSStyleRule/CSSRule 乱七八糟

Question

我正在为我的工作创建一个 Javascript 框架，支持最现代的浏览器(FF 4+、Chrome、Opera 11+、IE8+)。我在尝试扩展 prototype 时遇到了一些问题样式规则(假设 rule 是样式规则):

1. 在 Opera(目前版本为 11.64)中没有 CSSStyleRule对象，即使 String(rule) === "[object CSSStyleRule]" . rule instanceof CSSRule 仍然是真的，但是 CSSRule.prototype未定义。我知道获得正确原型(prototype)的唯一方法是 rule.__proto__ .
2. 在其他浏览器(例如 IE)中，我希望定义 parentStyleSheet属性(property)。 "parentStyleSheet" in CSSStyleRule.prototype始终为 false，我最好不想覆盖 native 实现，因为软编码实现并不十分便宜(至少，第一次运行时如此)。

有可用的样式规则就足以让我继续，但是这两点是问题，因为我正在处理一个框架，该框架是在加载文档之前定义的，所以我无法添加 <style>元素到 DOM。

所以，我要问的是:

1. 有没有一种方法可以创建虚拟样式规则(以及最终它的父样式表)而无需将其附加到 DOM？
2. 如何在 Opera 中访问样式规则原型(prototype)？

我担心第一个问题的答案是“否”。

Answer 1

before the document is loaded, so I can't add elements to the DOM

如果你不能附加到 document.head 那么你可以做丑陋的 document.write('<link rel="stylesheet" ... .然而 AFAIK 这不是问题，只要您附加到 document.head - 这是我们在我们的框架中所做的:

<script>
    (function(){
        var s='blueskin';
        var link=document.createElement('link');
        var h=document.getElementsByTagName('head')[0];
        link.type='text/css';
        link.rel='stylesheet';
        link.href='/skins/'+s+'.css';
        h&&h.appendChild(link);
    })();
</script>

为外部 css 文件动态添加样式表:

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.type = 'text/css';
link.href = 'http://example.com/stylesheet.css';
document.head.appendChild(link);

如果您将 CSS 作为字符串，则可以添加 style元素动态使用(这适用于我使用的所有浏览器，我认为这适用于 Opera，但我最近没有尝试过):

var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.rel = 'stylesheet';
setCss(styleElement, css);
document.head.appendChild(styleElement);

function setCss(styleElement, css) {
    if (styleElement.styleSheet) {   // IE
        styleElement.styleSheet.cssText = css || '';
    } else {
        var firstChild = styleElement.firstChild;
        firstChild && styleElement.removeChild(firstChild);
        var textnode = document.createTextNode(css || '');
        styleElement.appendChild(textnode);
    }
}

cssFx项目动态修复 <link rel="stylesheet" 的 CSS歌剧元素，如果你想做一些更复杂的事情。

如果您不想添加到 document.head，那么您也可以将子样式表添加到现有样式表(相当于 @import )，尽管我没有相应的代码片段。

最后，如果样式表需要进入正文，那么您将不得不使用 onload 或 jQuery $(myReadyFn);事件处理程序。