你如何使用：焦點，如果你也用Javascript設置屬性？

Question

如果您使用Javascript爲<輸入>元素進行樣式設置，則看起來您以這種方式設置的任何屬性都會在焦點規則中被忽略。

我有一個example其示出了這一點：

• 最初輸入元素的背景和邊界被設定在相同的周邊元件（div.header）
• 單擊[打開]鏈接打開最初未顯示的div.body元素。
• 我想明確標題是一個文本字段，所以改變輸入的背景和邊框以匹配剛纔顯示的textarea。

我有一個：焦點規則爲textarea和輸入，背景爲黃色，所以很明顯，文本字段有焦點。

但是這不適用於輸入元素，看起來是因爲我已經以編程方式設置了這些屬性。如果我沒有設置它們，那麼：焦點按預期工作。如果：焦點規則設置的屬性不在.css()中設置，那麼它們會被授予。

在Safari，Firefox，Chrome和IE上都是如此，所以顯然是「預期的行爲」，但我無法在網上找到任何說（爲什麼）這是正確的。

顯然我可以實現我想要的using blur and focus handlers，但我試圖理解爲什麼這是它的方式。

Answer 1

這與特異性做的，it is documented由W3C，具體

特異性具有四個分量;讓我們稱他們爲a，b，c和d。組分「a」是最有特色的，「d」最少。

• 部件「a」是很簡單：這是1的樣式屬性的聲明，否則就是0。

由於.css更新style直接屬性，它比任何特異性更高在你的樣式表中。您可以使用!important去給予更大的重要性（其優先級高於特異性），但更好的選擇是使用類（.addClass）而不是直接更改樣式屬性。

Answer 2

如果直接設置元素的樣式，則與使用HTML屬性的HTML style相同。它在the cascade中的任何選擇器之後。

一般來說，爲了用JavaScript處理CSS變化，您需要事先準備樣式表（作爲正確的樣式表），然後更改元素使其與新的選擇器匹配（通常通過修改其類列表）。您也可以修改the stylesheet itself with JavaScript。