Get relative CSS URL path in Javascript - Stack Overflow

admin管理员组

文章数量:1415476

NOTE: I finally found an exact duplicate question and good answer at: Get script path

I have a background-image defined with a path relative to my css file.

.my-image-class {
  background-image: url("../images/my_bg_image.png");
}

I would like change this path in JavaScript so that it now points to ../images/my_updated_bg_image.png. However simply changing the style declaration in JavaScript unfortunately changes the meaning of the relative path from the CSS location to the HTML location.

Is there a way to extract an absolute URL from a relative CSS URL?

If not is there a way to extract an absolute URL of the source of a currently running JavaScript function? This would give me the same information because my JS files are also relative to the images files.

Other solutions?

This is a similar question to javascript - How to use a image file relative to a url path? but the class swapping trick suggested there won't work for me because I actually have a variable list of these background images.

EDIT: Background info. The web app (Django based) is serving HTML content entirely separately from static js, image, and css files. The static content is in a

static/
  js/
  css/
  images/

file structure. So I know the relative relationships among these files. However the absolute URL's to the HTML content and the static content will likely be changing. So I don't want mix in hard coded URL's for HTML content into my js files if I can possibly avoid it. I'm getting the Django template from a 3rd party, so I'd also like to avoid editing that as well.

NOTE: I finally found an exact duplicate question and good answer at: Get script path

I have a background-image defined with a path relative to my css file.

.my-image-class {
  background-image: url("../images/my_bg_image.png");
}

I would like change this path in JavaScript so that it now points to ../images/my_updated_bg_image.png. However simply changing the style declaration in JavaScript unfortunately changes the meaning of the relative path from the CSS location to the HTML location.

Is there a way to extract an absolute URL from a relative CSS URL?

If not is there a way to extract an absolute URL of the source of a currently running JavaScript function? This would give me the same information because my JS files are also relative to the images files.

Other solutions?

This is a similar question to javascript - How to use a image file relative to a url path? but the class swapping trick suggested there won't work for me because I actually have a variable list of these background images.

EDIT: Background info. The web app (Django based) is serving HTML content entirely separately from static js, image, and css files. The static content is in a

static/
  js/
  css/
  images/

file structure. So I know the relative relationships among these files. However the absolute URL's to the HTML content and the static content will likely be changing. So I don't want mix in hard coded URL's for HTML content into my js files if I can possibly avoid it. I'm getting the Django template from a 3rd party, so I'd also like to avoid editing that as well.

• javascript
• css

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Apr 3, 2011 at 17:27 mjhmmjhm 16.7k1010 gold badges4646 silver badges5656 bronze badges 5

• Not quite sure what you mean by "my JS files are also relative to the images files" but is there a reason why a given script would not know the absolute path to the image it's trying to swap in? Why would a given bit of JS code need to refer to an image relatively? You can always use document.URL to figure out the root of the site, you should know from there where to go in a script. – Jamie Treworgy Commented Apr 3, 2011 at 17:33
• See added background info. Hope this answers your questions. Thanks for your interest. – mjhm Commented Apr 3, 2011 at 18:29
• OK - I don't know anything about Django's architecture, but I'm assuming something knows the root from which a given content tree is being served. In asp, in order to support virtual directories, I just have the server render something like app.rootUrl='/vdir/' and use that whenever I need to know my place in JS. I wish it was easily available without having to do that, but an extra 20 characters on each page saves a lot of headaches :) – Jamie Treworgy Commented Apr 3, 2011 at 18:33
• What is the js-code you use to change the background image url? – KooiInc Commented Apr 3, 2011 at 18:38
• @Kooilnc. Just basic js stuff like my_div.style.backgroundImage='url("../images/my_updated_bg_image.png")' – mjhm Commented Apr 3, 2011 at 21:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

URLs in CSS stylesheets are relative to the CSS file in which they appear (even if @imported). If they appear in HTML, they are relative to the base URL of the HTML file which is typically the URL of the HTML file, unless there is a <base href=...> element in the HTML.

So you need to figure out the absolute URL against which the relative URL is resolved and then calculate a relative URL for your image.

You might try seeing if the old image is being served from multiple different places. Lots of web servers accumulate cruft and perhaps you're just putting the new image in a logical, but still wrong, place.

EDIT:

There are a variety of options in between absolute and path relative ../foo style URLs.

Absolute paths: /images/myImage.png.

Protocol relative URLs: //my-domain./image/myImage.png

Either of these might let you strike a better balance between specifying as much as you need but no more.

本文标签： Get relative CSS URL path in JavascriptStack Overflow