Question

我正在使用firefox插件，并且在很大程度上依赖于javascript的一些动态更改。有一些UI元素（hbox /描述），使用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类中的font-size更改为动态调整为20px。现在我知道我们可以change the style using individual id，使用getElementById()并更改样式。但在这里，我希望改变一个类（对许多元素很重要），而不是在个别id上工作。我也知道setAttribute() {{1}}并更改'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，我认为它可能正常。

我学到的是它比我想象的要容易。基本上，您可以找到特定的样式表，特定的规则，并编辑＆＃34;样式＆＃34;使用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参数，它可以帮助您获取所需的工作表和规则。如果您只想使用getCSSsheet获取工作表，则可能是href函数。可能是setStyle函数来设置style和value。如果您想丢弃这些而不是修改，可能还有一组delCSSsheet和delCSSrule函数。还有insCSSsheet和insertCSSrule函数，也可以是createCSSsheet和createCSSrule。

这个网址（Totally Pwn CSS with Javascript），尽管有名称，并且已停止使用仅限网络存档状态，且已有9年或更长时间，但实际上仍然具有相关性。

Answer 3

几个月前我不得不做同样的事情。我用.addClass()和.removeClass()以及更多http://api.jquery.com/category/css/

的jQuery解决了这个问题

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

Answer 4

使用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

Answer 5

我不会建议赞成这种方法，但也可以直接添加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动画等。）。

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

5 个答案: