Question

（我只需要Chrome中的功能）

上下文：
我正在一起攻击node.js脚本，该脚本自动监视它所服务的文件以进行更改，然后使用websocket连接将消息推送到管理资产重新加载的浏览器中的控制页面。例如，如果html页面具有<img href="foo.jpg" />，则服务器将观看jpg并向“foo.jpg”已更改的页面发送消息。此时我使用javascript重新加载重新加载图像（src = src +“？cachbust = 00002”，或者其他一些）。

问题：
当背景图像发生变化时，我遍历页面元素以查找对图像的任何引用，并使用新的查询字符串重置它以重新加载它。为此，我使用jquery的$(...).css("background-image", ...)解决方案。这是有效的，但是当我随后更改css中url的值（即background：url（foo.jpg）; =＆gt; background：url（bar.jpg））时，background-img值不会更改。

对于css更改，我的脚本会重新加载链接的样式表。我怀疑通过javascript分配的值优先于链接样式表中的css规则的值以及内联样式属性。

问题：
是否有强制Chrome重新计算并应用外部样式表中的值并应用于已由jquery的$(...).css("...","...")功能指定样式的元素？

谢谢大家。

Answer 1

通常，如果要在某个事件上更改/重新加载背景图像，请尝试在主元素中嵌入span或其他元素，并在其上设置背景图像。然后，您可以替换该元素，而无需重新加载整个样式表。像这样：

<div class="content-element">
    <span class="bg-image-element" style="background-image: url('old.png')"></span>
    <!-- .... other stuff .... -->
</div>

<script>
    $('.some-element').someEvent(function() {
        $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span>
    });
</script>

通过javascript / jQuery工作改变css background-image时，我没有看到一致的行为。但是替换整个元素确实会强制重新加载背景图像。

Answer 2

对于css更改，我的脚本会重新加载链接的样式表。我怀疑通过javascript分配的值优先于链接样式表中的css规则的值以及内联样式属性。

这是完全正确的。像这样通过jQuery设置CSS与在元素上放置“style”属性具有相同的效果（事实上它确实如此）。这会覆盖CSS中通过选择器拾取的内容。

您应该可以使用

取消设置元素的本地样式

$(...).css("background-image", "");

在链接样式表重新加载时强制重新计算$（...）。css（“background-image”）

2 个答案: