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

你要找的是 document.styleSheets

例如,尝试在FF中为此页面粘贴以下内容,然后按enter键:

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

对我来说,这就产生了弦 "body { line-height: 1; }" . 有些方法/属性允许您操作规则。

http://code.google.com/p/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规则。但是,如果您的样式表中确实有“tree(negative)”,则该规则将被删除,而不会出现在对象模型中。

tree 我将假设 树 是 id 或 class

var tree = document.getElementById("tree");

现在 表示您的DOM元素,您可以任意操作它:

tree.style.color = "red";

Here is a great reference for mapping css properties to their javascript equivalent.

我不确定您是否可以执行实际的类/选择器重写。您需要针对使用 .tree 类并设置CSS。最快、最简单的方法是通过jQuery(或其他类似的框架):

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

您甚至可以使用内置的CSS函数:

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

(我这样做是为了向您展示standard JS是如何做到这一点的 $(...) 该部分是jQuery,用于使用 树 班如果不使用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规则从一个页面请求更改为下一个页面请求,则需要某种服务器端脚本。否则,原始样式表将在下一页请求时重新加载。

如果您想在第一个页面上使用事件强制执行服务器端操作,那么您可以使用AJAX实际更改用户的CSS规则。

“我想改变规则,以便 当我导航到下一页时,我 又来了。”

听起来您可能想要的是一个远程请求(“ajax”)返回到服务器,并生成一个动态样式表,然后发送回客户机?

这是如何/为什么是特定于Firefox的?

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

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

客户端: 将主题设置存储到cookie中,并在下次通过javascript加载它们。

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

实际上,你仍然在写这样的东西 element.style.color = . 但是,他们应该得到你想要的。