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路徑的圖像文件？

回答

相關問題