路径如何在css和js中工作

Question

这些天我遇到了很多关于css和js路径的问题.经过几次测试后,我无法得到确切的答案,所以我在这里寻求帮助.

1文件和结构.

1)test.css

 body{backgorund-image:url(img/bg.gif);}

2)测试/ 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)药结构:

+img
   icon.gif
   bg.gif
+css
   test.css
+js
   test.js
example.html
+subfolder
   example_sub.html

2个问题

example.html工作,但example_sub.html不起作用,错过了icon.gif.

所以我想知道test.js是否会在所有页面中使用的常见js,所以所有这些页面应该放在同一个目录中？

路径是如何工作的,我的意思是浏览器如何根据图像路径找到图像？

似乎css中的方式与js中的方式不同.

有谁能给我一个明确的答案？

顺便说一下,我的页面都是jsp,因此它们可以在servlet容器中工作.

如果我使用绝对路径,如:

xxxx src="/img/icon.gif"

它会尝试找到http // localhot:8000/img/icon.gif.对于cource,它将获得404错误.

有任何想法吗？

Answer 1

CSS中的路径与样式表的位置有关.如果它是链接的样式表,那么它就是CSS文件的路径.如果它嵌入在HTML文档中(带有样式元素或属性),则它与HTML文档相关.

JavaScript操纵其他文档.提到的任何路径取决于对文档进行了哪些操作.如果使用JS添加包含URL的样式属性,则该URL与HTML文档相关,因为style属性是其中的一部分.

如果我使用绝对路径,如src ="/ img/icon.gif"它将尝试查找http // localhot:8000/img/icon.gif.对于cource,它将获得404错误.

为什么"当然"？确保路径存在,并且没有问题.根相对URI(即以...开头/)通常是最明智的选择.