Javascript 路径在css和js中是如何工作的_Javascript_Html_Css_Path

Javascript 路径在css和js中是如何工作的

javascript html css path

Javascript 路径在css和js中是如何工作的,javascript,html,css,path,Javascript,Html,Css,Path,这些天来，我在css和js中遇到了很多关于路径的问题。经过几次测试，我无法得到准确的答案，所以我在这里寻求帮助 1文件和结构 1test.css body{backgorund-image:url(img/bg.gif);} 2test/js icon:img/icon.gif 3example.html <html> <link.... src=css/test.css> <script ... src=js/test.js>

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

1文件和结构

1test.css

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

2test/js

  icon:img/icon.gif

3example.html

  <html>
    <link.... src=css/test.css>
    <script ... src=js/test.js>
    ....
  </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错误

有什么想法吗？

好的

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

是指在该目录中查找文件夹img和文件bg.gif

您想返回一个父目录

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

嗯

是指在该目录中查找文件夹img和文件bg.gif

您想返回一个父目录

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

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

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

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

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

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

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

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

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

CSS使用相对于CSS文件位置的路径。 JavaScript使用相对于包含脚本标记的文件位置的路径。 CSS使用相对于CSS文件位置的路径。 JavaScript使用相对于包含脚本标记的文件位置的路径。

路径始终相对于引用它的文件所在的路径。因此，假设您的css位于/css/mystyle.css中，图像位于路径/img中，那么您在css中使用以下内容引用该图像：

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

如果您的js位于/js/myscript.js中，并且您正在从html文件（如/somepath/somehtml.html）对其进行寻址，那么您可以使用：

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

如果html位于/somepath/somotherpath/somehtml.html中，则应该使用src=../../js/myscript.js

该路径始终相对于引用它的文件所在的路径。因此，假设您的css位于/css/mystyle.css中，图像位于路径/img中，那么您在css中使用以下内容引用该图像：

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

如果您的js位于/js/myscript.js中，并且您正在从html文件（如/somepath/somehtml.html）对其进行寻址，那么您可以使用：

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

如果html位于/somepath/somotherpath/somehtml.html中，那么您应该使用src=../../js/myscript.js

src=/img/icon.gif确实是您想要使用的，没有理由注销它。http//localhot:8000/img/icon.gif将导致404错误，其中真正的路径应该是http//localhot:8000/myapp/img/icon.gif，比如说/myapp/img/icon.gif！绝对路径只有在您不处理应用程序位于localhost根目录的其他位置的开发服务器和生产服务器时才有效。这就是为什么您在应用程序的配置文件中指定应用程序根目录的路径。T

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