如何使用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参数？

回答

相关问题