【问题标题】：how does the path work in css and js路径在 css 和 js 中如何工作
【发布时间】：2011-06-28 08:41:56
【问题描述】：

这些天我遇到了很多关于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。当然会出现 404 错误。

有什么想法吗？

【问题讨论】：

【解决方案1】：

CSS

CSS 中的路径是相对于样式表的位置的。如果它是一个链接样式表，那么它就是 CSS 文件的路径。如果它嵌入在 HTML 文档中（带有样式元素或属性），那么它是相对于 HTML 文档的。

JavaScript

JavaScript 通常操作其他文档。提到的任何路径都取决于对文档进行的操作。如果您使用 JS 添加包含 URL 的样式属性，则该 URL 是相对于 HTML 文档的，因为样式属性是其中的一部分。

如果您不直接操作文档（因为我在将近十年后编辑此文档，并且 Ajax 之类的东西现在很常见），那么路径是相对于 HTML 文档的。

如果我使用像 src="/img/icon.gif" 这样的绝对路径，它将尝试查找 http//localhot:8000/img/icon.gif。当然它会得到一个 404 错误。

为什么是“当然”？确保该路径存在，并且您没有问题。具有绝对路径的相对 URL（即以 / 开头的 URL）通常是最明智的选择。

【讨论】：

src="/img/icon.gif" 确实是你想用的，没理由注销。
http//localhot:8000/img/icon.gif 会导致404错误，真正的路径应该是http//localhot:8000/myapp/img/icon.gif
所以说/myapp/img/icon.gif！
绝对路径只有在您不处理开发服务器和生产服务器（应用程序位于 localhost 根目录之外的其他位置）时才有用。
这就是为什么您在应用程序的配置文件中指定应用程序根路径的原因。然后将其吐出到环境中。

【解决方案2】：

【讨论】：

【解决方案3】：

路径总是相对于引用它的文件所在的路径。因此，假设您的 css 在 /css/mystyel.css 中，图像在路径 /img 中，那么您在 css 中引用该图像：

background-image:url(../img/myimg.jpg)

如果您的 js 在 /js/myscript.js 中，并且您从像 /somepath/somehtml.html 这样的 html 文件中对其进行寻址，那么您使用：

<script type="text/javascript" src="../js/myscript.js"></script>

如果 html 在 /somepath/somotherpath/somehtml.html 中，您将使用 src="../../js/myscript.js"

【讨论】：

【解决方案4】：

嗯

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

表示在此目录中查找文件夹 img 和文件 bg.gif

你想返回一个父目录。

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

【讨论】：