javascript和css文件中採用相對路徑，其基準路徑是完全不同的。 1.javascript引用資源(比如圖片)相對路徑是以宿主路徑(被引用的網頁比如你在首頁index.php引用了某js文件，則index.php即為宿主)所處位置為基準。 2.css引用資源(比如圖片)相對路徑是以.css文 ...
javascript和css文件中採用相對路徑，其基準路徑是完全不同的。
1.javascript引用資源(比如圖片)相對路徑是以宿主路徑(被引用的網頁比如你在首頁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.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>test</title>
<script type=”text/javascript” src=”../js/js/test.js”></script>
<link href=”../css/css/test.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<script type=”text/javascript”>
writeimg();
</script>
<div id=”imgtest”></div>
</body>
</html>
View Code
test.js
function writeimg()
{
document.write(“<img src=’images/index_02.jpg’ />”);
}
View Code
test.css
#imgtest
{
background-image:url(../../site/images/index_02.jpg);
width:500px;
height:50px;
border:solid 1px red;
}
View Code
