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

我正在开发一个firefox插件，在很大程度上依赖于javascript的一些动态更改。有一些UI元素（hbox/description），它们是使用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>

因此，我希望动态地将

description text

类中的字体大小更改为20px。 现在我知道我们可以通过

getElementById（）

和更改样式来设置id。但在这里，我希望更改一个类（这对许多元素都很重要），而不是处理单个ID。 我还知道，通过

setAttribute（）

和更改“class”-这同样需要处理个人id。实际上，我有很多UI元素（都指向一个CSS类），并且在一个CSS类中更改了许多值。所以我的问题是，有没有一种方法可以直接从javascript更改CSS类定义，而不必处理元素ID？ 谢谢你的帮助

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

---

几个月前我也不得不这么做。我用jQuery和

.addClass（）

以及

.removeClass（）

等工具解决了这个问题

---

或者，如果只需要Javascript，请使用纯Javascript中的HTMLDOM。关于这方面的官方文档和示例：

使用JQuery您可以使用

css

属性：

$(".description-text").css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" });

使用

说明文本的所有元素都将受到影响


编辑

或者使用纯javascript

var elements = document.getElementsByClassName('description-text');

for(var i=0; i<elements.length; i++){
    elements[i].style.backgroundColor = "#ffe";
    elements[i].style.borderLeft = "5px solid #ccc";
    //any style you want to apply
}

var elements=document.getElementsByClassName（'description-text'）；
对于（var i=0；i我将不建议使用此方法，但也可以直接添加css规则（或更复杂的删除它们），执行以下操作

var css = '.description-text { font-size: 100px; }',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

很少有情况下这是一种可行的方法，很多情况下这不是正确的做法。如果你计划多次覆盖同一件事（除非你先删除旧规则），你永远不应该这样做，只有在你使用CSS的其他功能时才应该这样做（例如，新元素获得正确的样式，第三方内容获得正确的样式，css动画等）。
我昨晚问了一个非常类似的问题，今天下午就解决了，我刚刚测试了这个问题，因为在Firefox 29.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个样式表中的所有选择器的搜索。加载项的第一张工作表已加载

否则，您将循环遍历所有
文档.样式表
，（如果
href
不匹配，则可以选择跳过），然后循环遍历每个样式表上的所有
cssRules
，并查看
.selectorText
是否与所需的选择器匹配，如果是OP:
。说明文本
（请注意，对于类或ID等，您需要与CSS文件中显示的完全相同的前导
或
#
等）

找到所需的选择器后，可以修改
.style
对象（在中有详细说明）。在OP示例中，我们希望将
字体大小
样式更改为20px，即
.style.fontSize='20px'

使用这些基础知识，可以创建一个更通用的函数，以便更容易地重用。可能是一个
getCSSrule
函数，它接受一个必需的
selector
和一个可选的
href
参数，这将帮助您获得所需的工作表和规则。如果您想使用j，可能是一个
getCSSsheet
函数使用
href
获取工作表。如果要放弃而不是修改，可以使用
setStyle
函数来设置
样式和
值。如果要放弃而不是修改，可以使用一组
delcssheet
和
delcsrule
函数。还可以使用
inscssheet
和
rtcsrule
函数，ma也可以使用
createCSSsheet
和
createCSSrule

这个url（），尽管名称和已失效的Web Archive only状态，而且已经有9年或更长时间了，实际上仍然是相关的。
谢谢！所以你建议我应该获取应用该特定类的所有元素并进行大规模样式设计？好的，我想我可以接受。：）事实上，我在寻找一个更简单的解决方案，比如直接从javascript更改类内容。不确定这是否真的可行。这是一个小插件，我不打算使用jquery只是为了改变样式。我已经用一些纯javascript解决方案编辑了我的帖子是的，getElementsByClassName（）AlienArrays已经建议了。使用Jquery一定会容易得多，但不幸的是，对于一个小插件来说，Jquery太难了。我想知道是否有更简单的解决方案。不管怎样，谢谢你的建议。这是一个小插件，我不打算使用Jquery只是为了改变样式。好的。所以你可以从纯HTML使用HTML DOMJavascript.Officia
document.styleSheets[ i ].href
document.styleSheets[ i ].cssRules[ j ].selectorText
document.styleSheets[ i ].cssRules[ j ].style.fontSize