如何使用JavaScript更改CSS參數？

我知道這是不修改CSS類常見的方式......但無論如何>>我有以下功能更改CSS參數用JavaScript：如何使用JavaScript更改CSS參數？

function changeCSSParameter(classId, param, value) 
{ 
    var CSSRules; 
    if (document.all) 
    { 
    CSSRules = 'rules'; 
    } 
    else if (document.getElementById) 
    { 
    CSSRules = 'cssRules'; 
    } 
    for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) 
    { 
    var classes = document.styleSheets[0][CSSRules][i].selectorText.split(/\s*,\s*/); 
    for (var j = 0; j < classes.length; j++) 
    { 
     if (classes[j] == classId) 
     { 
     document.styleSheets[0][CSSRules][i].style.setProperty(param, value, ''); 
     } 
    } 
    } 
}

但是這個功能不會因爲我的工作希望如果風格類是在組中定義，如

.first, .second 
{ 
    color: red; 
}

......因爲任何改變將適用於兩類。我該如何解決這個問題？請指教。

沒有jQuery，請只是老式的JavaScript。

來源

2012-07-08 Ωmega

你必須使用jQuery沒有任何損失。你爲什麼要避免它？ – Lion 2012-07-08 02:23:49

這可能是一個學習練習，或者「沒有圖書館」的要求。 – 2012-07-08 02:24:32

@Lion - 我愛jQuery，但它是第三方的要求： -/ – 2012-07-08 02:26:32

我的第一個問題是，你是多麼不確定的推論的document.all的存在意味着一個樣式表將有一個rules屬性和它不存在，這說明它有一個cssRules財產？因爲這對我來說似乎相當粗略？它基於什麼？

但是，假設這是一個合理的推論，爲什麼世界上你每次調用函數都要計算CSSRules？在啓動時計算一次並存儲它，將函數返回到包含該值的閉包中。如果個人選擇（選擇的逗號分隔的組內）是單類選擇如.myClass

這就是說，在你的主要問題...

您的代碼纔有效。任何更復雜的事情，比如div.myClass都行不通，對嗎？如果這就是你想做的一切，我想我有一個（相當令人討厭但可行的）解決方案：遇到一個以逗號分隔的解決方案，其中一個是匹配的，爲每個選擇器編寫新規則，克隆現有的規則。然後，對於與您的班級名稱相符的那個，請更改相關的屬性。最後，刪除原來的規則。

這並不好玩，它在一般情況下做出了一些明顯不合理的假設，但看起來他們可能會與您在代碼中嘗試做的事情相匹配。

嘿，我確實說這是討厭的！ :-)

來源

2012-07-08 03:29:11

'div.myClass'工作正常。 – 2012-07-08 03:33:36

+1令人討厭。你去...某個人可能在某個時候跟着quirksmode.org ... – 2012-07-08 03:33:52

出於某種原因，'document.getElementsByTagName（「iframe」）[0] .style [' - o-transform']] =「rotate（10deg）scale（1.25，1.25）」;'不工作，我通過改變StyleSheet類來實現它，如我的代碼所示。我不知道爲什麼簡單的'.style'不工作： - /這是我做這個愚蠢的解決方法的唯一原因... – 2012-07-08 03:38:01

如何使用JavaScript更改CSS參數？

回答

相關問題