在Javascript中获取相对CSS URL路径

Question

注意：我终于找到了一个完全重复的问题和答案： 获取脚本路径

我有一个背景图像定义了相对于我的CSS文件的路径。

.my-image-class {
  background-image: url("../images/my_bg_image.png");
}

我想在JavaScript中更改此路径，以便它现在指向../images/my_updated_bg_image.png 。 但是，简单地更改JavaScript中的样式声明会更改从CSS位置到HTML位置的相对路径的含义。

有没有办法从相对CSS URL中提取绝对URL？

如果没有，有没有办法提取当前运行的JavaScript函数的源的绝对URL？ 这会给我相同的信息，因为我的JS文件也与图像文件有关。

其他方案？

这是一个类似于javascript的问题- 如何使用相对于url路径的图像文件？ 但是类交换技巧表明这对我不起作用，因为我实际上有一个这些背景图像的变量列表。

编辑：背景信息。 Web应用程序（基于Django）完全独立于静态js，image和css文件提供HTML内容。 静态内容在

static/
  js/
  css/
  images/

文件结构。 所以我知道这些文件之间的相对关系。 但是，HTML内容和静态内容的绝对URL可能会发生变化。 所以我不希望将HTML内容的硬编码URL混合到我的js文件中，如果我可以避免它。 我从第三方获得了Django模板，所以我也想避免编辑它。

Answer 1

CSS样式表中的URL与它们出现的CSS文件相关（即使是@import ed）。 如果它们以HTML格式显示，则它们相对于HTML文件的基本URL（通常是HTML文件的URL），除非HTML中有<base href=...>元素。

因此，您需要找出解析相对URL的绝对URL，然后计算图像的相对URL。

您可以尝试查看是否从多个不同的地方提供旧图像。 很多网络服务器累积起来，也许你只是把新图像放在一个逻辑但仍然错误的地方。

编辑：

绝对和路径相对../foo样式URL之间有多种选择。

绝对路径：/ /images/myImage.png 。

协议相对URL： //my-domain.com/image/myImage.png

这些中的任何一个都可以让您在指定所需数量之间取得更好的平衡，但不能更多。