javascript – 更新CSS规则属性值

我有一个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规则,那么你就可以做到.
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)");