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

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