jquery - jQuery设置CSS后背景图像不响应

Question

我有一个div元素，它将根据浏览器屏幕的大小包含不同的背景图像。

这是一个将执行响应式工作的 CSS 示例：

div {
    background-image: url(a.jpg);
}
@media screen and (min-width: 700px) {
    div {
        background-image: url(b.jpg);
    }
}

上面的示例 CSS 工作正常，直到我使用 jQuery 设置背景图像。换句话说，在 jQuery 设置的之后background-image，div响应不再起作用。

对我来说，响应停止工作是有道理的，因为浏览器不知道如果/当用户调整浏览器窗口大小时我希望允许响应继续工作。但是，就我而言，我确实希望浏览器窗口的大小调整始终覆盖background-imagejQuery 可能在调整大小之前设置的值。

这可以在 CSS 中解决还是我需要用脚本来管理它？（注意：!important不成功）。

在这个小提琴中，您将看到在调整浏览器窗口大小时背景图像如何适当变化。当且仅当您单击其中一个按钮时，响应性才会停止工作。

score 1 · Accepted Answer

$(window).on('resize',function(){
    $('div').removeAttr('style');
});

如果您想要其他样式保留仅删除背景图像

$(window).on('resize',function(){
    $('div').css('background-image','');
});

1 回答 1