更新CSS规则属性值

Update CSS rule property value

本文关键字：属性 规则 CSS 更新      更新时间：2023-09-26

我有一个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正在应用于元素，而不是应用于"class"。

如何针对特定的css规则，以便更新其键值？

如果这有道理的话。

如果你想更改".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)");

问题是您将background-image设置为一个内联stlye，它覆盖任何样式表规则。翘课不会有任何影响。

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

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

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

.tile {
  background: none !important;
}

可能是另一种情况，但你明白了吗？：）

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

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

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

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

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

尝试：

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

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

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

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

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

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

您的css中可以有两个类。。。

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

然后使用jquery只需切换类。。。

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

我相信这只是很多方法中的一种。我希望它能有所帮助。

你非常接近。您似乎正在将内联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);
}
相关文章：