js,css相对路径引用
程序员文章站
2022-10-30 22:37:20
1 2
View Code
View Code
View Code
js和css文件中采用相对路径，其基准路径是完全不同的
1.js引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。
2.css引用资源(比如图片)相对路径是以.css文件所处位置为基准。
大家在html中通常会导入一些外部的css、js文件，而其中一个比较容易被忽视的问题就是路径问题，有时候，我们在css、js中都有通过路径来引入一张图片的需求，当我们采用相对路径的时候，在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。
举个例子来说明这个问题。
假如我们有如下文件目录树：（\是文件夹）
–\site
——\images
———index_02.jpg
——test.htm
–\css
——\css
———-test.css
–\js
——\js
———-test.js
引用代码如下:
test.css
1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 2 <html xmlns=”http://www.w3.org/1999/xhtml” > 3 <head> 4 <title>test</title> 5 <script type=”text/javascript” src=”../js/js/test.js”></script> 6 <link href=”../css/css/test.css” rel=”stylesheet” type=”text/css” /> 7 </head> 8 <body> 9 <script type=”text/javascript”> 10 writeimg(); 11 </script> 12 <div id=”imgtest”></div> 13 </body> 14 </html>
test.js
1 function writeimg()
2 {
3 document.write(“<img src=’images/index_02.jpg’ />”);
4 }
test.htm
1 #imgtest
2 {
3 background-image:url(../../site/images/index_02.jpg);
4 width:500px;
5 height:50px;
6 border:solid 1px red;
7 }
下一篇： Python设计模式之门面模式简单示例