CSS、JS中的相對路徑引用的區別
轉貼於：http://www.cnblogs.com/xuxiace/archive/2012/03/06/2381874.html
初學者由於對一些比較基本的知識的把握不是很牢，所以在開發或者設計的時候，往往很容易出現一些錯誤或者異常現象而找不到出錯的根源。記得自己剛剛java入門的時候，會出現一些很“離奇”的現象，然後一遍一遍查看自己的代碼，一步一步的進行調試（當然那個時候的調試方式也只是從初學這的角度上而言的，大多是比較粗略的手段），還是發現不了哪裡出了問題，這直接打擊學習的積極性。甚至有時候，照著書本或者教學視頻敲的執行個體代碼也不能正常跑起來，不知道大家有沒有這種悲催的感覺。
比如說，大家在html中通常會匯入一些外部的css、js檔案，而其中一個比較容易被忽視的問題就是路徑問題，有時候，我們在css、js中都有通過路徑來引入一張圖片的需求，當我們採用相對路徑的時候，在css和js中引用圖片的相對路徑的基準是不一樣的。在css中出現的相對路徑，是以css檔案所在路徑為基準的，而js中的路徑則是以匯入此js的網頁檔案所在的位置為基準的。
為了很好的說明這個問題，我們寫一個簡單的切換圖片的js特效，剛開始的時候，我們讓html有一副預設的背景圖，通過css來設計，而當使用者單擊“切換背景圖”按鈕時，通過javascript代碼來控制背景圖的變更，效果如下：
圖一：更改背景圖之前的
圖二：更改背景圖之後的
我們的檔案結構是這樣的：
/index.html
/js/chbk.js
/css/style.css
/images/bk1.jpg、bk2.jpg
1. style.css代碼
@charset "utf-8";
/* CSS Document */
body{background-color:#ccc;}
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
#in{margin:auto;text-align:center;}
其中，url(../images/bk.jpg)路徑是相對於style.css的。
2.chbk.js代碼
// JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}
其中，url(images/bk2.jpg)路徑是相對於index.html的，而不是chbk.js的url(../images/bk.jpg)。
3.index.html代碼
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引入Html中的css、js的路徑問題</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/chbk.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
</div>
<div id="in">
<input class="in" type="button" value="單擊我更改背景" onclick="chbk()" />
</div>
</body>
</html>
以上說明，對於js和cs中的路徑引用，如果採用相對路徑的話，其基準路徑是有區別的。
通常情況下，js不僅僅是一個html在於，特別對於動態網頁而言，js中的路徑引用應該採用絕對路徑，可以通過定義一個全域變數如path來活動項目的真實路徑（像jsp中就可以用request.getSession().getServletContext().getRealPath("/")），然後在每個路徑上加上path（path+你的路徑）從而取出路徑錯誤的問題。
總結：在css中出現的相對路徑，是以css檔案所在路徑為基準的，而js中的路徑則是以匯入此js的網頁檔案所在的位置為基準的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
