3 回答

TA貢獻1815條經驗 獲得超13個贊
與這里的某些答案相反,使用Javascript編輯樣式表本身不僅可行,而且性能更高。簡單地這樣做$('.myclass').css('color: red')最終將遍歷匹配選擇器的每個項目,并分別設置style屬性。這確實效率不高,如果您有數百個元素,它將引起問題。
更改項目的類是一個更好的主意,但是您仍然遇到相同的問題,因為您要更改N個項目的屬性,該屬性可能很大。更好的解決方案可能是更改單個父項或少數父項上的類,然后使用css中的“層疊”命中目標項。這適用于大多數情況,但不是全部。
有時,您需要將很多項目的CSS更改為動態的,或者沒有辦法通過擊中少數父母來實現。更改樣式表本身,或添加一個小的新樣式表以覆蓋現有的CSS,是更改項目顯示的一種非常有效的方法。您只需要與DOM進行一次交互,瀏覽器就可以真正有效地處理那些更改。
jss是一個庫,可幫助簡化從javascript直接編輯樣式表的過程。

TA貢獻1784條經驗 獲得超9個贊
您可以使用以下功能:
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */ window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function(cssText, node) {
if(!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
};
特點:
該函數是用vanilla-js編寫的,因此比jQuery替代品具有更好的性能。
第一次調用后會創建一個樣式表setStyle,因此,如果您不調用它,則不會創建任何樣式表。
相同的樣式表可重復用于以下的 setStyle
該函數返回對與您添加的CSS束關聯的節點的引用。如果使用該節點作為第二個參數再次調用該函數,它將用新的CSS替換舊的CSS。
例
var myCSS = setStyle('*{ color:red; }');
setStyle('*{ color:blue; }', myCSS); // Replaces the previous CSS with this one
瀏覽器支持
至少它可以在IE9,FF3,Chrome 1,Safari 4,Opera 10.5上運行。
還有一個IE版本,可在現代瀏覽器和舊版本的IE上使用!(適用于IE8和IE7,但可能會使IE6崩潰)。

TA貢獻1808條經驗 獲得超4個贊
好問題。這里的很多答案都提供了一個與您的要求直接矛盾的解決方案
“我知道如何使用jQuery為元素分配寬度,高度等,但是我實際上想做的是更改樣式表中定義的值,以便可以將動態創建的值分配給多個元素。
”
內聯 jQuery .css樣式元素:它不會改變CSS的物理規則!如果您想這樣做,我建議您使用普通的JavaScript解決方案:
document.styleSheets[0].cssRules[0].cssText = "\
#myID {
myRule: myValue;
myOtherRule: myOtherValue;
}";
這樣,您將設置樣式表css規則,而不附加內聯樣式。
希望這可以幫助!
添加回答
舉報