从 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 类中的字体大小更改为动态 20px。 现在我知道我们可以使用change the style using individual id 和getElementById() 并更改样式。但是在这里我希望更改一个类（这对很多元素都很重要），而不是处理单个 id。 我也知道we can point to another class definition by setAttribute() 并更改'class' - 这将再次需要处理个人ID。实际上，我有很多 UI 元素（都指向一个 CSS 类），并且在一个 CSS 类中更改了许多值。所以我的问题是，有没有办法直接从 javascript 更改 CSS 类定义，而无需处理元素 id？ 感谢您的帮助。

Answer 1

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

document.getElementsByClassName

Answer 2

我昨晚问了一个非常相似的问题，今天下午想通了，我刚刚测试过它可以在 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 样式表中的所有选择器默认情况下，在加载插件的第一张工作表之前。

否则，您循环遍历所有document.styleSheets，（如果href 不匹配，则可以跳过），然后遍历每个样式表上的所有cssRules，并查看.selectorText 是否匹配您想要的选择器，在 OP 的情况下：.description-text（请注意，您需要前导 . 或 # 等，与 CSS 文件中出现的完全相同，用于类或 ID 等）。

当您找到所需的选择器后，您可以修改.style 对象（在W3Schools DOM Style Object 中有详细记录）。在 OP 示例中，我们要将 font-size 样式更改为 20px，即 .style.fontSize = '20px'。

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

这个 url (Totally Pwn CSS with Javascript)，尽管名称和已失效的 Web Archive only 状态，并且 9 岁或以上，实际上仍然相关。

Answer 3

我不会建议支持这种方法，但也可以通过以下方式直接添加 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 的其他一些功能时才应该这样做（例如，新元素获得正确的样式，第 3 方内容的样式正确，css 动画等）。

Answer 4

几个月前我也必须这样做。我用 jQuery 用.addClass() 和.removeClass() 以及更多http://api.jquery.com/category/css/ 解决了它

或者，如果您只想要 Javascript，请使用纯 Javascript 中的 HTML DOM。带有示例的官方文档：http://www.w3schools.com/js/js_htmldom_css.asp

Answer 5

使用 JQuery 你可以使用css 属性：

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

所有使用description-text 类的元素都会受到影响

Documentation of jquery css property

编辑

或者使用纯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
}

Documentation of javascript style