CSS、JS中的相對路徑引用的區別

來源:互聯網
上載者:User

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的網頁檔案所在的位置為基準的。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.