how does the path work in css and js
These days I meet so many problems about the path in css and js. And after a few tests,I can not have a exact answer,so i ask here for help.
1 The file and structure.
1)test.css
body{backgorund-image:url(img/bg.gif);}
2)test/js
icon:img/icon.gif
3)example.html
<html>
<link.... src=css/test.css>
<script ... src=js/test.js>
....
</html>
4)example_sub.html
<html>
<link.... src=../css/test.css>
<script ... src=../js/test.js>
....
</html>
5)structue:
+img
icon.g开发者_StackOverflowif
bg.gif
+css
test.css
+js
test.js
example.html
+subfolder
example_sub.html
2 question
The example.html work,but the example_sub.html does not work,the icon.gif is missed.
So I wonder if the test.js is a common js which will be used in all the page,so all these pages should be put in the same directory?
How does the path work,I mean how does the browser find the image according the image path?
It seems that the manner in css are not the same as it in js.
Anyone can give me a clearly answer?
BTW,my pages are all jsp,so they are work inder the servlet container.
If I use the absolute path like:
xxxx src="/img/icon.gif"
It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.
Any ideas?
CSS
Paths in CSS are relative to the location of the stylesheet. If it is a linked stylesheet, then it is the path of the CSS file. If it is embedded in an HTML document (with the style element or attribute) then it is relative to the HTML document.
JavaScript
JavaScript generally manipulates other documents. Any paths mentioned depend on what manipulation was done to the document. If you use JS to add a style attribute which includes a URL, then that URL is relative to the HTML document since the style attribute is part of that.
Where you aren't manipulating the document directly (because I'm editing this almost a decade later and things like Ajax are now common) then the path is relative to the HTML document.
If I use the absolute path like src="/img/icon.gif" It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.
Why "of course"? Make sure that path exists, and you have no problems. Relative URLs with absolute paths (i.e. ones starting with /) are usually the most sensible choice.
- CSS uses paths relative to the CSS file location.
- JavaScript uses paths relative to the location of the file containing the script tag.
The path is always relative to the path the file referring to it is in. So, let's say your css is in /css/mystyel.css and images are in the path /img, then you refer to that image in css with:
background-image:url(../img/myimg.jpg)
If your js in in /js/myscript.js and you are adressing it from a html-file like /somepath/somehtml.html, then you use:
<script type="text/javascript" src="../js/myscript.js"></script>
If the html was in /somepath/somotherpath/somehtml.html, you would have used src="../../js/myscript.js"
Well
body{backgorund-image:url(img/bg.gif);}
is saying look in this directory for a folder img and the file bg.gif
You want to go back one parent directory.
body{backgorund-image:url(../img/bg.gif);}
加载中,请稍侯......
精彩评论