css和javascript圖片路徑的不同

今天敲程式碼時，想寫一個切換頭像的功能，問題來了，頭像就是死活不出現吶。突然靈光一現，css和javascript圖片路徑書寫方式不一樣？ ？ ？

嗯…是這樣的:

1. 在根目錄下新建了個「images」文件，裡面放了兩張圖片bg1.png和bg2.png
2. 在根目錄下另外新建了兩個文件夾"style "和"script"用來存放用到的.css檔案和.js檔案
3. index.html中有

   <div id="pic">
   <p>开心吗</p>
   </div>

4. 如果這時我要設定id為pic的標籤的圖片背景,在css檔案裡這樣寫:

   #pic{ background:url(../images/bg1.png); }

5. 而在js檔案中則要將路徑寫做images/bg1.png

總之，

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

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

css的圖片檔案路徑是相對於自己的，js的圖片檔案路徑是相對於所在檔案的。