在链接样式表重新加载时强制重新计算 $(...).css("background-image")答案

【问题标题】：Force recalculation of $(...).css("background-image") on linked stylesheet reload在链接样式表重新加载时强制重新计算 $(...).css("background-image")
【发布时间】：2011-03-16 03:14:58
【问题描述】：

（我只需要 Chrome 中的功能）

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

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

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

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

谢谢大家。

【问题讨论】：

标签： jquery google-chrome node.js css

【解决方案1】：

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

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

您应该能够取消设置元素的本地样式

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

【讨论】：

谢谢，我也是这么想的。它可能不会对性能产生太大影响，但我总是希望有一个便宜的捷径。

【解决方案2】：

一般来说，如果您想在某个事件中更改/重新加载背景图像，请尝试在主元素中嵌入 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 背景图像时，我没有看到一致的行为。但是替换整个元素似乎确实会强制重新加载背景图像。

【讨论】：