Question

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

在Opera（迄今为止的11.64节）中，即使CSSStyleRule，也没有String(rule) === "[object CSSStyleRule]"个对象。 rule instanceof CSSRule仍然如此，但CSSRule.prototype未定义。我知道获得正确原型的唯一方法是rule.__proto__。
在其他浏览器（例如，IE）中，我希望定义parentStyleSheet属性。 "parentStyleSheet" in CSSStyleRule.prototype总是假的，我最好不要覆盖原生实现，因为软编码不是很便宜（至少，第一次运行）。

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

所以，我问的是：

有没有办法创建虚拟样式规则（最终是它的父样式表）而无需将其附加到DOM？

如何在Opera中访问样式规则原型？

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

Answer 1

在加载文档之前，所以我无法向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项目会动态修复opera的<link rel="stylesheet"元素的CSS。

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

最后如果样式表需要进入正文，那么你必须使用onload或jQuery $（myReadyFn）;事件处理程序。

获取<style>原型，CSSStyleRule / CSSRule mess </style>

1 个答案: