JQuery中的addClass是否覆蓋任何現有的基於css類的樣式？

Question

我正在嘗試為點擊的元素添加一個類。 元素已經分配了幾個clases，包括一個帶邊框的clases。

雖然我知道我可以使用removeClass（）刪除當前的CSS類，但我需要該類提供的其他樣式。 所以我想知道下面的例子，我不能用addClass（）覆蓋邊框樣式是邊框是否已經設置了屬性？ 我不想使用內聯樣式，因為它們不易維護。

CSS：

.dibHighlight{border:1px solid orange;}

JQuery不起作用：

$(this).closest('.drop').addClass('dibHighlight'); // Doesn't work

有效的JQuery：

$(this).closest('.drop').css({ border: "1px solid orange" }); // Works

Answer 1

您可以根據CSS特性的規則使用addClass覆蓋其他類，就像CSS類在元素上使用class屬性時覆蓋/繼承屬性一樣。

你的第二個例子工作的原因是因為它等同於根據CSS特性在元素上設置style屬性，這是最具體的。

相反，第一個示例不起作用，因為可能有一個比.dibHighlight更具體的CSS類

Answer 2

可能有另一個類優先於CSS中其他地方定義的dibHighlight 。 您應該使用Firebug （或類似的開發人員工具） 測試哪些樣式/類應用於您的元素 。

或者對於臟快速修復 ，試試這個：

.dibHighlight{border:1px solid orange !important;}

Answer 3

下面的類不起作用，因為有一些現有的類，其代碼在css文件中低於此類。

.dibHighlight{border:1px solid orange;}

使下面的代碼工作只需將上面的css代碼粘貼到css文件的最后一行。

$(this).closest('.drop').addClass('dibHighlight');

執行此操作后，您將在jquery中使用addClass添加類dibHighlight，它將覆蓋現有的類類似屬性。

我建議使用toggleClass()而不是addClass()因為即使toggleClass()可以作為addClass() ，以防你想要添加的類不存在。