【发布时间】：2012-03-27 05:48:44
【问题描述】：
在 Firefox 中，我的 .css 文件中有以下片段
tree (negative){ font-size: 120%; color: green;}
使用javascript，如何更改规则，将颜色设置为红色？
注意：
我不想更改元素。
我想改变规则。
请不要回答类似
...
element.style.color = '红色';
【问题讨论】：
标签： javascript css firefox
【发布时间】：2012-03-27 05:48:44
【问题描述】：
您正在寻找的是document.styleSheets 属性，通过它您可以访问您的css 规则并对其进行操作。大多数浏览器都有这个属性，但是 IE 的界面略有不同。
例如，尝试在此页面的 FF 中粘贴以下内容并按 Enter：
javascript:alert(document.styleSheets[0].cssRules[1].cssText)
对我来说产生字符串"body { line-height: 1; }"。有一些方法/属性可以让你操纵规则。
这是一个为您抽象此接口的库（跨浏览器）：http://code.google.com/p/sheetup/
【讨论】：
-
警告：该链接现在指向一些看起来很奇怪的中文网站。您可以在 code.google.com/p/sheetup 找到 sheetup 库。
function changeCSSRule (stylesheetID, selectorName, replacementRules) {
var i, theStylesheet = document.getElementById(stylesheetID).sheet,
thecss = (theStylesheet.cssRules) ? theStylesheet.cssRules : theStylesheet.rules;
for(i=0; i < thecss.length; i++){
if(thecss[i].selectorText == selectorName) {
thecss[i].style.cssText = replacementRules;
}
}
};
【讨论】：
您可以通过 CSS 对象模型（目前称为 DOM 2 级样式）更改样式表中的 CSS 规则。但是，如果您的样式表中确实有“树（否定）”，则该规则将被删除并且根本不会出现在对象模型中。
【讨论】：
由于没有 HTML 元素 tree 我将假设 tree 是另一个元素的 id 或 class。
您将首先通过 id 检索 DOM 元素：
var tree = document.getElementById("tree");
现在tree 代表您的 DOM 元素，您可以随意操作它：
tree.style.color = "red";
Here is a great reference for mapping css properties to their javascript equivalent.
【讨论】：
-
我不想改变元素样式，我想改变CSS规则
-
我不明白你的意思——你想编辑实际的样式表吗？更改样式就是更改该元素在内存中的规则。
-
据我所知，您无法编辑 CSS。至少，我从未见过这样做过。
-
是的，我想动态改变实际的样式表规则，这样所有使用该规则的元素也会改变
-
好吧，实际的样式表存在于服务器上，而 javascript 在客户端上执行，因此如果没有一些繁重的服务器端编码，您想要的就不可能实现。为什么更改内存中的规则不起作用？
我不确定您是否可以进行实际的类/选择器覆盖。您需要定位使用 .tree 类的每个元素并设置 CSS。最快最简单的方法是通过 jQuery（或其他类似框架）：
$('.tree').each(function() { this.style.color = "red"; });
您甚至可以使用内置的 CSS 函数：
$('.tree').css('color', 'red');
（我这样做的第一种方法是向您展示标准 JS 是如何做到的。$(...) 部分是 jQuery，用于选择具有 .tree 类的所有元素。如果您不使用 jQuery，则需要替代代码。）
如果tree 是一个ID，而不是一个类（页面上应该只有一个），那么使用getElementById 应该没问题。您的代码应该看起来像另一个答案。
【讨论】：
for( var i in document.getElementsByTagName("tree") ){
document.getElementsByTagName("tree")[i].style.color = "red";
}
【讨论】：
-
我不想迭代所有元素，将“绿色”更改为“红色”，因为我只会更改具有特定属性的元素。我想更改规则，以便在导航到下一页时不必再次进行所有更改。
正如我在另一个答案的评论中所说，我从来没有见过你想要的那样做。我只以与 CSS 渲染器相同的方式定位元素并更改了每个元素的样式。
我确实看到了这个：jQuery.Rule
它听起来就像它做你想要的，但演示导致我的浏览器有点翻转。我会邀请您查看源代码，看看它确实可以满足您的需求，如果您想在没有 jQ 的情况下使用它，请以它为起点。
编辑： 是的，这应该可以。它通过将另一个 <style> 标记附加到页面并在其中写出您的覆盖来工作。如果您想将其移植到纯 JS，这很容易遵循。
【讨论】：
对于调试，您可以使用Firebug 即时更改 CSS 规则。
【讨论】：
如果您想将呈现的 css 规则从一个页面请求更改为下一个页面请求，则需要某种服务器端脚本。否则原始样式表只会在下一页请求时重新加载。
如果您想在首页使用事件来强制执行服务器端操作，那么您可以使用 AJAX 来实际更改用户的 CSS 规则。
【讨论】：
“我想更改规则，以便 当我导航到下一页时，我 不必进行所有更改 再次。”
听起来您可能想要的是一个远程请求（“ajax”）返回到服务器，并带有您想要发出的请求，并生成一个动态样式表发送回客户端？
这个 Firefox 如何/为什么是特定的？
【讨论】：
-
我指定了 FF，因为我不想阅读以 IE 为中心的答案。
-
然后指定“跨浏览器”或类似的。那里有很多不同的浏览器。 IE和FF只是两个。
我想更改规则，以便当我导航到下一页时，我不必再次进行所有更改。
我可以在这里想到两种方法。即客户端和/或服务器端。
客户端： 将主题设置存储到cookies中，下次通过javascript加载。
服务器端： 如果您的网站有登录系统，您还可以将用户偏好存储到数据库中，并在下次生成带有此信息的网页。
最终，您仍在编写element.style.color = 之类的内容。但是，他们应该得到你想要的。
【讨论】：