css ,javascript中的圖片路徑設定

css路徑設定跟javascript路徑設定是有區別的：

1.css中的圖片設定是根據css本身的檔案路徑去確定。

2.javascript中的圖片路徑設定是根據被引用的javascript的頁面【.html,aspx,asp,jsp等】路徑設定。

 

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

(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路徑為準.