Question

在firefox中，我的.css文件中有以下片段

tree (negative){  font-size: 120%; color: green;}

使用javascript，如何更改规则，将颜色设置为红色？

注意：
我不想改变这个元素我想改变规则。请不要回答

...

element.style.color ='red';

Answer 1

您正在寻找的是document.styleSheets属性，您可以通过该属性访问css规则并对其进行操作。大多数浏览器都具有此属性，但IE的界面略有不同。

例如，尝试在FF中为此页面粘贴以下内容并按Enter：

javascript:alert(document.styleSheets[0].cssRules[1].cssText)

对我来说，产生字符串"body { line-height: 1; }"。有一些方法/属性可以让你操纵规则。

这是一个为您提取此界面的库（跨浏览器）：http://code.google.com/p/sheetup/

Answer 2

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;
        }
    }
};

Answer 3

您可以通过CSS对象模型（目前称为DOM Level 2 Style）更改样式表中的CSS规则。但是，如果你的样式表中确实有“树（负）”，那么规则将被删除而根本不会出现在对象模型中。

Answer 4

由于没有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.

Answer 5

我不确定你是否可以进行实际的类/选择器覆盖。您需要定位使用.tree类的每个元素并设置CSS。最快捷最简单的方法是通过jQuery（或其他类似的框架）：

$('.tree').each(function() { this.style.color = "red"; });

您甚至可以使用内置的CSS功能：

$('.tree').css('color', 'red');

（我是第一种向你展示标准JS如何做的方式。$(...)部分是jQuery，用于选择.tree类的所有元素。如果你不使用jQuery，你需要替代代码。）

如果tree是一个ID，而不是一个类（页面上应该只有一个），所以使用getElementById应该没问题。您的代码应该看起来像另一个答案。

Answer 6


for( var i in document.getElementsByTagName("tree") ){
   document.getElementsByTagName("tree")[i].style.color = "red";
}

Answer 7

正如我在另一个答案的评论中所说的那样，我从来没有见过这样做你想要的。我只使用与CSS渲染器相同的方式定位元素并更改每个元素样式。

我确实看到了这一点：jQuery.Rule

它听起来就像它做了你想要的但是演示导致我的浏览器翻出一点。我邀请你看看源代码，看它确实做了你想做的事情，如果你想在没有jQ的情况下使用它，那就把它当作一个起点。

编辑：是的，这应该有效。它的工作原理是在页面上添加另一个<style>标记并在其中写出覆盖。如果你想将它移植到普通的JS，那么它很容易理解。

Answer 8

对于调试，您可以使用Firebug即时更改CSS规则。

Answer 9

如果要将呈现的css规则从一个页面请求更改为下一个页面请求，则需要某种服务器端脚本。否则原始样式表只会在下一页请求时重新加载。

如果要在第一页上使用事件来强制执行服务器端操作，则可以使用AJAX实际更改用户的CSS规则。

Answer 10

“我想改变规则，以便当我导航到下一页时，我不必进行所有更改试“。

听起来你可能想要的是一个远程请求（“ajax”）带回你想要的请求回到服务器，并生成一个动态样式表，然后发送回客户端？

这个Firefox如何/为何具体？

Answer 11

我想更改规则，以便在导航到下一页时，我不必再次进行所有更改。

我可以在这里想到两种方法。即客户端和/或服务器端。

客户方：将主题设置存储到cookie中，然后通过javascript加载它们。

服务器端：如果您的站点具有登录系统，您还可以将用户首选项存储到数据库中，并在下次生成时记住此信息的网页。

很高兴，你还在写element.style.color =之类的东西。但是，他们应该得到你想要的东西。

在firefox中，如何更改现有的CSS规则

11 个答案: