獲取<style>原型，CSSStyleRule/CSSRule混亂

我正在爲我的作業創建一個Javascript框架，支持最新的瀏覽器（FF 4 +，Chrome，Opera 11+，IE8 +）。我在想擴展的樣式規則的prototype（假設rule是一個樣式規則）一些問題：獲取<style>原型，CSSStyleRule/CSSRule混亂

在Opera沒有CSSStyleRule對象，即使String(rule) === "[object CSSStyleRule]"（V 11.64至今）。 rule instanceof CSSRule，但CSSRule.prototype未定義。我知道得到正確原型的唯一方法是rule.__proto__。
在其他瀏覽器（例如IE）中，我希望定義parentStyleSheet屬性。 "parentStyleSheet" in CSSStyleRule.prototype始終是錯誤的，我最好不要重寫本機實現，因爲軟編碼的並不是很便宜（至少在第一次運行時）。

請準備一個樣式規則就足以讓我去，但是這兩點問題，因爲我工作的一個框架，它的定義是加載文檔前，這樣我就可以」 t將<style>元素添加到DOM。

那麼，我要問的是：

有沒有一種方法來創建一個虛擬樣式規則（最終其父樣式表），而不需要將其連接到DOM？

如何訪問Opera中的樣式規則原型？

我擔心第一個問題的答案是「否」。

來源

2012-05-18 MaxArt

我希望這有助於位：http://dev.opera.com/articles/view/dynamic-style-css-javascript/ –

只是好奇：爲什麼一個新的框架？ –

@Diodeus這是一個很好的基礎教程，但遺憾的是它仍然依賴於DOM的可用性。 – MaxArt

加載文檔之前，所以我不能添加元素的DOM

如果不能追加到document.head那麼你可以做的難看document.write('<link rel="stylesheet" ...。但是據我所知，這不是隻要你附加到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元素（這適用於我使用所有的瀏覽器，我覺得這個這個工程的歌劇，但我最近沒有嘗試過）：

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）;事件處理程序。

來源

2012-05-29 03:50:16 robocat

我已經解決將臨時''

獲取<style>原型，CSSStyleRule/CSSRule混亂

回答