如何在JavaScript中動態設置和修改CSS？

我有一些JavaScript代碼創建了一些div元素，並設置了它們的CSS屬性。因爲我想從我的JavaScript代碼分離CSS的邏輯和CSS，因爲很容易在自己的.css文件閱讀，我想我的設置元素的CSS className，然後動態地注入一些值定義的CSS屬性。如何在JavaScript中動態設置和修改CSS？

這裏是我想怎樣做：

style.css：

.myClass { 
    width: $insertedFromJS 
}

script.js：

var myElement = document.createElement("div"); 
myElement.className = "myClass";

我想要做這樣的事情，但在這一點上myElement.style.width是空

myElement.style.width.replaceAll("$insertedFromJS", "400px");

我想我在這裏的問題是，調用myElement.className = "myClass"後，尚未應用CSS。

來源

2012-05-02 AkademiksQc

你什麼時候運行JS？立即？ 'onload'？ 'ondocumentready'？ – mwcz

我對這個問題有點困惑。你試圖影響所有類型爲「myClass」的元素，還是僅僅是剛剛創建的元素？ –

我和詹姆斯在一起。在回答這個問題並重新閱讀之後，我實際上對這種事情的目的甚至會產生困惑。你想通過創建一個依賴於Javascript的CSS樣式表來「解耦」你的JS和CSS，以注入/替換你將硬編碼到你的Javascript代碼中的正確值？這與「分離」這個詞的意思完全相反。 – streetlogics

如果我正確地理解你的問題，這聽起來像你想設置佔位符文本在你的CSS文件，然後使用JavaScript來解析出你想爲類設置的CSS值的文本。你不能以你想要做到的方式做到這一點。爲了做到這一點，你必須抓住CSS文件的內容出來的DOM，操縱文本，然後保存回給DOM。但是，這是一個非常複雜的方式去做...

myElement.style.width = "400px";

...可以在幾秒鐘內爲你做。我知道它並沒有真正解決脫鉤JS CSS的問題，但真正有沒有一個整體很多你可以做的。畢竟，你正試圖動態設置CSS。

取決於你想完成什麼，你可能會想嘗試定義多個類，只是改變你的JS className屬性。

來源

2012-05-02 20:10:57

我只是想用我的css文件作爲模板，並在其中注入我的變量，但我想它不是這種技術的最佳方法，我會留在我的JavaScript CSS實現。謝謝 – AkademiksQc

你能在這個使用jQuery？您可以使用

$(".class").css("property", val); /* or use the .width property */

來源

2012-05-02 19:50:06

這篇文章的標籤是關於javascript，而不是jQuery。 –

@Oscar Jara - 據我所知，jQuery是100％的javascript。但從來沒有那麼少，這就是爲什麼他問jQuery是否有可能我猜 –

jQuery是Javascript，但Javascript不是jQuery。 – Starx

設置樣式，可能會完成定義內頁面樣式聲明。

這裏是我的意思

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.cssText = '.cssClass { color: #F00; }'; 
document.getElementsByTagName('head')[0].appendChild(style); 
document.getElementById('someElementId').className = 'cssClass';

但是修改它可以有很多的貓膩比你想象的一部分。一些正則表達式解決方案可能會做得很好。但我發現，這是另一種方式。

if (!document.styleSheets) return; 
var csses = new Array(); 
if (document.styleSheets[0].cssRules) // Standards Compliant { 
    csses = document.styleSheets[0].cssRules; 
} 
else {   
    csses = document.styleSheets[0].rules; // IE 
} 
for (i=0;i<csses.length;i++) { 
    if ((csses[i].selectorText.toLowerCase()=='.cssClass') || (thecss[i].selectorText.toLowerCase()=='.borders')) 
    { 
    thecss[i].style.cssText="color:#000"; 
    } 
}

來源

2012-05-02 20:02:38 Starx

1.不要使用'.innerHTML'。改爲使用' .textContent'或' .appendChild（document.createTextNode（'...'））''。 2.這在舊的IE版本中不起作用。對於IE，訪問' .styleSheet.cssText ='...'。 –

-1

有一個jQuery插件，名爲jQuery的規則， http://flesler.blogspot.com/2007/11/jqueryrule.html

我試了一下動態設定棋盤遊戲的一些格大小。它適用於FireFox，不適用於Chrome。我沒有嘗試IE9。

來源

2013-10-21 17:26:57

如何在JavaScript中動態設置和修改CSS？

回答

相關問題