css和javascript中圖片路徑的不同

之前在寫前端代碼時,在圖片路徑的設定那裡經常會遇到一個問題.比方說,我

(1)在根目錄下面建立了個"images"文夾,裡面放了張圖片top.gif

(2)在根目錄下另外建立了兩個檔案夾"CSS"和"JS"專門用來存放用到的.css檔案和.js檔案(假設我們用到的為"test.css"和"test.js")

假設在根目錄下有個"test.html"檔案,裡面分別引用了"test.css"以及"test.js"

<link type="text/css" href="CSS/test.css" rel="stylesheet"/>

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

在test.html中有這樣一個標籤

<div id="top">

<p>Just for test!</p>

</div>

如果這時我要設定id為top的標籤的背景圖片,在"test.css"裡這樣寫:

#top{ background:url(../images/top.gif); }

在test.js裡面這樣寫:

document.getElementById("top").style.background="images/top.gif";

可以發現兩者有明顯的不同,被這問題困擾了很久,卻一直搞不清楚是什麼原因,在網上google了下,終於找到了答案.

html頁面中,引用js指令碼和css檔案的機制是不一樣的.

(1)對於js指令碼,html是吧指令碼載入到頁面中一起解析(就跟你的js指令碼直接寫在這個頁面是一樣的)

(2)而對css檔案,則僅僅是提供一個串連,並不會將其載入到html頁面中,如在本例中,html根據連結去css檔案中尋找所需要的圖片檔案

這兩者的區別很重要,當我們要引用一個圖片時,在js檔案中要以引用它的html的路徑為準,而在css檔案中,要以改css路徑為準.

 

如有錯誤,歡迎指正.....

參考資料:http://blog.csdn.net/gideal_wang/archive/2009/03/06/3962254.aspx