帶有「insertRule」的錯誤？

我有Javascript代碼，從「Javascript：The Definitive Guide」（第442-444頁或kindle位置14998）修改，它創建了一個CSS樣式表並插入規則。但我發現，使用它可以促進在Chrome中不工作標準法：帶有「insertRule」的錯誤？

JSFiddle #1

如果上面的代碼在Chrome上運行，只有兩個字「你」變成橙色。如果我引入一個醜陋的黑客攻擊，那麼它在Chrome中工作正常：

JSFiddle #2

在書中這是一個錯誤，在瀏覽器的錯誤，或者我搞砸了？

注意我有意不使用庫（例如jquery等）進行此練習。

來源

2012-03-13 Brent Arias

爲什麼不讓jquery爲你做這件事？ – Paul 2012-03-13 17:16:47

我在問題中增加了一個「無圖書館」筆記，以便澄清。 :) – 2012-03-13 17:20:46

在Flanagan的書（第6版）中提供的代碼的工作原理是* *修改新樣式表的'.innerHTML'或*使用'.insertRule（）'/'.addRule（）'。它不使用兩者。它爲* every *'addCSSRule'調用創建* new *樣式表。我猜'.innerHTML'不適用於[DOM CSS]（http://www.w3.org/TR/DOM-Level-2-Style/css.html）。（順便說一下，您的代碼在Firefox 10和IE7-9中不起作用）。 – Zeta 2012-03-13 18:51:04

在

if (typeof styles === "string") { 
// The argument is stylesheet text 
if (styleElt) { 
    styleElt.innerHTML = styles; 
} else {

styleElt.innerHTML = styles;線重新創建styleSheet對象。 styleSheet.styleSheet的值與文檔分離，導致所有先前聲明的樣式規則丟失。

Firefox的工作方式與Chrome相同，所以看起來這不是一個錯誤。

來源

2012-03-13 18:52:22 kirilloid

帶有「insertRule」的錯誤？

回答

相關問題