javascript - How to use a image file relative to a url path?_问答_开发者

javascript - How to use a image file relative to a url path?

开发者 https://www.devze.com 2023-01-13 17:45 出处：网络

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:

相关专题：css javascript

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 t开发者_Go百科o 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().

As variant use element inline style

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

This works for me with 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>

where green.png is a green pixel. Which browser are you using?