Home/ Questions/Q 1030767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T12:45:09+00:00

Is there a way to use a image url relative path in a javascript

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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().

    • 0