从javascript [Firefox/XUL]更改CSS类内容

Question

我正在开发firefox插件，在很大程度上依赖于javascript的一些动态更改。有一些UI元素(hbox/descriptions)，它们使用CSS类进行样式设计。现在，我希望更改javascript中的CSS类定义，而不必使用元素id。这可能吗？

以前也曾问过类似的问题，但大多数问题都是使用php来生成基于CSS或jquery的更改。下面是我的场景的一个例子:我的XUL：

<box id="firefox-addon-box">
  <description id="description-1" class="description-text"> Some description </description>
  <description id="description-2" class="description-text"> Some description </description>
</box>

我的CSS：

.description-text {
  font-size: 15px; 
  color: #fff; 
}

因此，我希望将description-text类中的字体大小动态更改为20 to。现在我知道我们可以使用使用个人更改样式 id，使用getElementById()并改变样式。但在这里，我希望更改一个类(这对许多元素都很重要)，而不是处理单个ids。我还知道，我们可以指向另一个类定义。 by setAttribute()和change ' class‘--这将再次需要处理单个id。实际上，我有大量的UI元素(都指向一个CSS类)，而且在一个CSS类中很多值都发生了变化。因此，我的问题是，是否有一种方法可以直接更改javascript中的CSS类定义，而不必处理元素ids？谢谢你的帮助。

Answer 1

myVar = document.getElementsByClassName("description-text"); 

document.getElementsByClassName

Answer 2

我昨晚问了一个非常类似的问题，并在今天下午解决了这个问题，我刚刚测试了它在Firefox29.0b1-49.0a1上的工作，它可能会在早期版本上工作，对于XUL被删除后的更新版本(SDK或WebExtensions)可能不确定，但是由于它是纯JS/DOM/CSS，我认为它可能会正常工作。

我学到的是，这比我想象的要容易。本质上，您可以找到特定的样式表、特定的规则，并使用DOM编辑该规则的“样式”，就像在HTML中一样。

document.styleSheets[ i ].href
document.styleSheets[ i ].cssRules[ j ].selectorText
document.styleSheets[ i ].cssRules[ j ].style.fontSize

所有这些都是从类似document.styleSheets数组的对象开始的，其中i是外部document.styleSheet循环索引，j是cssRules内环索引。

href是可选的，是样式表的URI。如果已知，并且该工作表不是动态生成的，而且如果您确信您想要的选择器只存在于该文件中，那么您可以在加载外接程序的第一个工作表之前，使用它来限制搜索Firefox默认加载的所有~10个样式表中的所有选择器。

否则，循环遍历所有document.styleSheets，(如果href不匹配，可以选择跳过)，然后循环遍历每个样式表上的所有cssRules，并查看.selectorText是否与所需的选择器匹配，例如OP：.description-text (注意，您需要前面的.或#等，就像在CSS文件中显示的那样，用于类或ID等等)。

当您找到所需的选择器时，就可以修改.style对象(在W3Schools DOM样式对象上有很好的文档)。在OP示例中，我们希望将font-size样式更改为20 be，即.style.fontSize = '20px'。

使用这些基本原理，可以构建一个更通用的函数，以便更容易地重用。也许是一个getCSSrule函数，它接受一个必需的selector和一个可选的href参数，这将通过获取所需的工作表和规则来帮助您。如果您只想使用getCSSsheet函数来获取工作表，那么可能是一个href函数。也许是一个setStyle函数来设置style和value。如果您想放弃这些函数而不是修改这些函数，那么可能需要一组delCSSsheet和delCSSrule函数。还有insCSSsheet和insertCSSrule函数，也可能是createCSSsheet和createCSSrule。

这个网址(带Javascript的Pwn CSS)，尽管有其名称，并且仅处于已失效的Web状态，并且有9岁或更多，实际上仍然是相关的。

Answer 3

几个月前我也不得不这么做。我用jQuery和.addClass()和.removeClass()以及更多的http://api.jquery.com/category/css/来解决它

或者，如果只想使用Javascript，可以使用纯Javascript中的HTML。有关这方面的官方文档和示例：css.asp