使用JQuery更改CSS類中的屬性

Question

我無法弄清楚如何在CSS類中更改屬性。現在我爲該特定的div添加樣式，但我想要的是CSS樣式中的屬性被更改，而不是僅由新的樣式屬性覆蓋。

一個例子：

.example{background-color:blue} 

<div class="example">example</div> 

所以，我怎麼能那麼就通過重寫它像這樣改變背景顏色的。實例CSS，而不是：

<div class="example" style="background-color:blue">example</div> 

我已經嘗試了很多的東西，但我無法弄清楚。我試過.attr()和.css()，但我錯過了什麼。

Answer 1

你不能改變類的實際CSS（當然你可以，但它是非常困難和反對的做法） - 但你可以改變它，現在被應用到課堂上的一切：

$('.example').css('background-color', 'blue'); 

但是，您可以做什麼，只要您的類型的新元素生成就重新應用該CSS。例如，調用一個AJAX腳本，從另一個文件中檢索數據後：

$('#blah').load('script.php', function() { 
    $('.example').css('background-color', 'blue'); 
}); 

你也可以有一個間隔重新適用於你的所有元素，但性能明智的，這是不推薦：

setInterval(function() { 
    $('.example').css('background-color', 'blue'); 
}, 100); 

我給你的建議是尋找另一種方式來標記你的改變，就像第二類一樣，並使用該類來改變你的元素。

Answer 2

你想要什麼是不可能的，但是這樣的事情可能會更好。

body.blueTheme .example { background-color: blue; } 
body.redTheme .example { background-color: red; } 

現在不是改變事件處理程序的顏色，而是改變正文的類。

Answer 3

動態更改樣式表通常是一個糟糕的主意，除非您打算實施完整的重新組合。

通常情況下最好找到一些其他方式來標記元素，以便它們獲得不同的樣式，但是如果您必須執行此操作，您可以動態更改加載哪些樣式表。

鏈接到外部CSS文件<style>元素上放置一個id：

<link id="dynCss" rel="stylesheet" type="text/css" href="..." /> 

然後把風格有兩種不同形式在兩個不同的CSS文件。

，然後你可以使用：

document.getElementById('dynCss').href = ... 

或

$('#dynCss).attr('href', ...); 

這將隨後負載（和應用）在新的URL的新款式。