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

有没有办法在JavaScript文件中使用图像url相对路径（就像css文件一样）？javascript - 如何使用相对于url路径的图像文件？

用于测试我用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帮助:)

PS：如果你知道在jQuery的解决方案我也很欣赏。

来源

2010-08-31 Seeker

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

如果稍后使用JavaScript指定路径，它将被解释为相对于文档。

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

url("module1/img.gif");

但你已经知道了。

我不知道建立相对样式表外部样式表的路径的方法。

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

在样式表：

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

，并在时机成熟时段落获得背景图像，做一个

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

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

来源

2010-08-31 19:03:16

好主意。我不记得那一个。我仍然喜欢找到一个解决方案，我可以使用JavaScript而不是在CSS中声明它，但是如果我没有发现它也是一个体面的解决方法。坦克:) – Seeker 2010-08-31 23:00:44

这适用于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是绿色像素。你正在使用哪种浏览器？

来源

2010-08-31 19:14:48 zwol

你的代码工作正常，但它并不反映我的情况。当javascript代码（/文件）和html文件位于不同的目录中时，会发生问题。我想在js文件中使用'url（img.gif）'，但它不会工作（就像它在css文件中）。我使用Firefox 3.6.8，IE8.0.6001.18702和Chrome 5.0.375.127 – Seeker 2010-08-31 22:52:39

尝试使用Firebug的网络面板来查看浏览器正在尝试加载的内容。我敢打赌，它试图加载* something *，但解释URL相对于你认为不会的东西（比如Pekka说的）。 – zwol 2010-09-01 15:55:42

使用上面的代码，它并没有在Firebug的Net面板 - > All选项卡中显示出来。无论如何，我已经采用Pekka认为它在我的网站中使用jquery非常棒的概念。 – Seeker 2010-09-06 15:57:19

为Variant使用元素内嵌样式

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

来源

2014-12-24 11:50:14

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

回答

相关问题