Question

有没有办法在javascript文件中使用图片网址相对路径（就像css文件一样）？

用于测试我使用了2个div，并在第一个使用css并在第二个中使用js在后台显示了一个gif：

-my文件目录是：根/ index.html中

根/模块1 / test.css

根/模块1 / test.js

根/模块1 / img.gif

-index.html代码：

<html>
  <head>
    <link href="module1/test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <P id="p1"> Line 1 </P>
    <P id="p2"> Line 2 </P>
    <script type="text/javascript" src="module1/test.js"></script>
  </body>
</html>

-test.css代码：

#p2 {background: url('img.gif')}

在css中我可以使用相对路径。

-test.js代码：

document.getElementById("p1").style.backgroundImage = 'url(./module1/img.gif)';

但是在js中我必须使用绝对路径，否则它不起作用。

-img.gif - 您可以使用任何gif图像。

我试图在网上搜索，但我只是感到困惑:(

plz help :)。

Ps：如果你知道jquery的解决方案我也很感激。

Answer 1

在CSS样式表中，路径相对于样式表进行解释。

如果稍后使用JavaScript指定路径，则会相对于文档对其进行解释。

您仍然可以使用相对路径，但如上所述，它们必须与文档相关。所以它必须是

url("module1/img.gif");

但你已经知道了。

我不知道在样式表之外相对于样式表构建路径的方法。

我想到的唯一解决方法是在样式表中定义一个类，而不是使用javaScript指定背景图像，更改元素的类。

在样式表中：

.p2_img_gif {background: url('img.gif')}

当段落获取背景图片的时候，请执行

document.getElementById("p2").className = "p2_img_gif";

如果您需要切换类或指定多个类，请考虑使用jQuery的addClass()和removeClass()。

Answer 2

这适用于Firefox 3.6。

<!doctype html>
<style>
div { background: red; width: 80px; height: 80px }
</style>
<script>
window.onload = function() {
  document.getElementById("test").style.backgroundImage = 'url("green.png")';
}
</script>
<p>There should be no red.</p>
<div id="test"></div>

其中green.png是绿色像素。您使用的是哪种浏览器？

Answer 3

作为变体使用元素内联样式

var element = document.getElementById("p1");
var imageUrl = './module1/img.gif';
element.setAttribute('style', 'background-image: url(' + imageUrl +');');

javascript - 如何使用相对于url路径的图像文件？

3 个答案: