更新 CSS 规则属性值答案

【问题标题】：Update CSS rule property value更新 CSS 规则属性值
【发布时间】：2012-02-01 15:14:13
【问题描述】：

我有一个 html 元素，它的样式（使用 jquery）具有通过其类名定位的背景图像。

当我删除课程时，背景图像仍然存在 - 这不是我所期望或想要的。

test.html

<div id='log' class='tile'>HELLOWORLD</div>

test.css

.tile{
    background: none;
}

test.js

$('.tile').css("background-image", "url(tile.jpg)"); // We see image
$('#log').toggleClass('tile'); //  We still see image

在敲了我的头之后，我想我知道发生了什么事。 css 被应用于元素 - 而不是“类”。

如何定位特定的 css 规则以更新其键值？

如果这有意义的话。

【问题讨论】：

Changing a CSS rule-set from Javascript的可能重复
另见stackoverflow.com/questions/8224527/…
当使用toggleClass('tile') 时，您将tile 添加到现有类中

标签： javascript jquery html css

【解决方案1】：

如果你想改变“.tile”类的css规则，那么你可以做到。 There is a post 很好解释：

function changeBackgroundImage(className, value){
        var ss = document.styleSheets;
        for (var i=0; i<ss.length; i++) {
            var ss = document.styleSheets;
            var rules = ss[i].cssRules || ss[i].rules;
            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === className) {
                    rules[j].style.backgroundImage = value;
                }
            }
        }
}

你可以这样称呼它：

changeBackgroundImage(".tile","url(tile.jpg)");

【讨论】：

这不再有效，FF 说“SecurityError: The operation is not secure”关于这一行：var rules = ss[i].cssRules || ss[i].rules;

【解决方案2】：

问题是您将background-image 设置为覆盖任何样式表规则的内联样式。切换类不会有任何影响。

您可以通过样式表规则设置背景，然后添加一个删除它的类；

#log {
  background-image: url(tile.jpg);
}
#log.tile {
  background: none;
}

或者你可以使用!important作为；

.tile {
  background: none !important;
}

...它可能是相反的方式，但你明白了吗？ :)

【讨论】：

【解决方案3】：

尝试删除类 tile 并使用 bg: none 应用新类

有效 - 当需要时应用带有 bg 的类，当不需要时 - 没有

【讨论】：

应该是“瓷砖”类，我也一直将其视为标题。 :)

【解决方案4】：

在这种情况下不需要 jQuery。您可以使用普通的旧 JavaScript。查看本教程：

javascriptkit.com - Changing external style sheets using the DOM

【讨论】：

他可能想切换背景。
首先尝试了这个，但是 firefox 回来时出现了函数错误。也许我加载样式表的方式......？无论如何 - 找到了解决方案。

【解决方案5】：

如果不重写样式表中的声明，您无法更改类本身，您只能使用选择器中的元素。

试试：

$('.tile').css("background-image","none")

【讨论】：

【解决方案6】：

$('#log').toggleClass('tile',true);

【讨论】：

【解决方案7】：

我会将背景图片作为 css 样式作为类的一部分：

 .tile {background-image: url('tile.jpg')};

然后在必要时使用 jquery 删除该类

 $('#log').removeClass('tile');

【讨论】：

【解决方案8】：

你的 css 中可以有两个类...

.tile{ 
    background: none; 
} 

.tile-w-image
{
    background-image: url(tile.jpg);
}

然后用 jquery 切换类...

$("#log").toggleClass('tile').toggleClass('tile-w-image');

我确信这只是众多方法中的一种。希望对你有帮助。

【讨论】：

背景图片只有在运行时才知道。它的动态。

【解决方案9】：

你很亲密。似乎您正在向元素添加内联 CSS，然后尝试切换类。在大多数情况下，您应该将 CSS 样式分开：

HTML：

<div id='log' class='tile'>HELLOWORLD</div>

jQuery（我想这应该在点击或其他事件时完成）：

$('#log').toggleClass('tile'); //  We still see image

如果“tile”类已写入 HTML，则切换它会将其删除。

CSS：

.tile{ 
    background-image: url(tile.jpg);
}

【讨论】：