用jQuery重置元素樣式

有誰知道如何用jQuery重置元素的樣式？舉例來說，我有這樣一個樣式表：用jQuery重置元素樣式

.container-red { background-color: #f00; } 
.container-red #innerbox { background-color: #fff; } 
.container-white { background-color: #fff; } 
.container-white #innerbox { background-color: #f00; } 
#innerbox { margin: 20px; }

而這個標記：

<div id="container" class="container-red"> 
    <div id="innerbox">Some text here</div> 
</div>

然後當我改變使用jQuery

$("#container").removeClass("container-red").addClass("container-white");

的內盒個數造型不會改變對類因爲它已經被風格化了，這讓我留下了一個白色的容器和一個白色的內盒，而不是一個白色的容器和一個紅色的內盒。因此，我希望能夠像做

$("#container").children().resetStyles();

，並讓每個容器的孩子更新到正確的造型

編輯：對不起，你沒事吧，代碼確實做工精細，我的問題只是我有一些其他的CSS覆蓋我的類風格。

來源

2011-08-31 Jordan Wallwork

這不是它應該做的嗎？ http://jsfiddle.net/cYARr/你的代碼似乎在這裏工作得很好。 –

你正在做的事情錯了，我想是因爲我測試了它，並給我它的工作原理：

http://jsfiddle.net/VH4du/

我測試瀏覽器，Firefox和IE9。

來源

2011-08-31 11:05:50

它確實改變了我。看一個例子here。

來源

2011-08-31 11:06:46

問題不在於你的jQuery代碼，也不是說這個元素已經有了風格。任何體面的和最近的瀏覽器都會自動重新應用樣式到內部元素。

問題是，您使用內部框作爲ID：因爲應該只有一個元素與一個ID，一些瀏覽器的CSS引擎給出奇怪的優先級，並可能繞過一些CSS規則。

嘗試將innerbox轉換爲CLASS，並且它應該按照您的預期工作。

順便說一句，哪個瀏覽器暴露了問題？

來源

2011-08-31 11:07:04

他發佈的HTML標記中沒有重複的標識。 –

不，我沒有說過存在重複的id，簡單地說，考慮到id的單一性，一些CSS引擎傾向於在涉及id時優化並忽略CSS規則的一部分。使用類是更加友好的CSS引擎。 –

啊，我的壞，我沒有這樣理解（可能是因爲你在括號裏寫的）。 –

用jQuery重置元素樣式

回答

相關問題