javascript - 如何使用相对于url路径的图像文件？ [英] javascript - How to use a image file relative to a url path?
问题描述
有没有办法在javascript文件中使用图像url相对路径（就像css文件一样）？
用于测试我使用的2个div，并显示gif in background using css in 1st and using js in second：
-my文件目录是：
root / index.html
root / module1 / test.css
root / module1 / test.js
root / module1 / img.gif
-index.html代码：
< html>
< head>
< link href =module1 / test.css =stylesheettype =text / css>
< / head>
< body>
< P id =p1>行1< / P>
< P id =p2>线2< / P>
< script type =text / javascriptsrc =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 i
在CSS样式表中，路径相对于样式表进行解释。
如果稍后使用JavaScript指定路径，它将相对于文档进行解释。
您仍然可以使用相对路径， ，如所述，它们将必须是相对于文档。因此必须
url（module1 / img.gif）;
但你已经知道了。
我不知道如何在样式表之外创建相对于样式表的路径。
我想到的唯一解决方法是在
在样式表中：
$ b$ b
.p2_img_gif {background：url（'img.gif'）}
并且当段落获得背景图片的时间到时，执行
document.getElementById（p2）。className =p2_img_gif;
如果您需要切换类或指定多个类，请考虑使用jQuery的 addClass（）和 removeClass（）。
Is there a way to use a image url relative path in a javascript file (just like the css files)?
for testing i used 2 divs and displayed a gif in background using css in 1st and using js in second:
-my file directory is: root/index.html
root/module1/test.css
root/module1/test.js
root/module1/img.gif
-index.html code:
<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 code:
#p2 {background: url('img.gif')}
in the css I can use the relative path.
-test.js code:
document.getElementById("p1").style.backgroundImage = 'url(./module1/img.gif)';
but in the js I have to use the absolute path or it doesn't work.
-img.gif - you can use any gif image.
I've tried to search the web but I was just getting confused :(
plz help :)
Ps: if you know a solution in jquery i also appreciate.
In a CSS style sheet, the path is interpreted relative to the style sheet.
If you specify a path later, using JavaScript, it will be interpreted relative to the document.
You can still use relative paths, but, as said, they will have to be relative to the document. So it would have to be
url("module1/img.gif");
But you already know that.
I don't know a way of building paths relative to the style sheet outside the style sheet.
The only workaround that comes to my mind is to define a class inside the style sheet and, instead of specifying a background image using javaScript, changing the element's class.
In the style sheet:
.p2_img_gif {background: url('img.gif')}
and when the time comes for the paragraph to get the background image, do a
document.getElementById("p2").className = "p2_img_gif";
if you need to toggle classes, or specify multiple ones, consider using jQuery's addClass() and removeClass().
这篇关于javascript - 如何使用相对于url路径的图像文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
