更新 CSS 规则属性值

Question

我有一个 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 规则以便更新其键值？

如果这是有道理的话。

Answer 1

如果你想改变“.tile”类的CSS规则，那么你可以这样做。
有一篇文章解释得非常清楚好吧：

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)");

Answer 2

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

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

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

或者您可以只使用 !important 作为；

.tile {
  background: none !important;
}

...可能是相反的情况，但你明白了吗？ :)

Answer 3

尝试删除类 tile 并使用 bg 应用新类：无

效果 - 需要时使用 bg 应用类，不需要时 - 不使用

Answer 4

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

javascriptkit.com - 使用 DOM 更改外部样式表

Answer 5

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

尝试：

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

Answer 6

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

Answer 7

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

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

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

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

Answer 8

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

.tile{ 
    background: none; 
} 

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

然后使用jquery只需切换这些类...

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

我确信这只是执行此操作的多种方法之一。我希望它有帮助。

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