在網頁中js和css中引用圖片的相對路徑問題
2016/8/8 9:32:44 閱讀:1885
發布者:1885
在網頁中css一般寫圖片的相對路徑都用./(當前路徑) 或../(上級路徑) 或../../(上上級路徑);一直以為js也可以這么寫,但今天發現js中引用圖片的相對路徑不能和css中引用圖片似的相對于當前css代碼所在的位置寫相對路徑。
在JS中引用圖片相對路徑:JS文件是指在頁面中引用的外部JavaScript文件,其中可能采用JavaScript代碼生成html代碼,由于生成的html代碼是嵌入在引用該JS文件的頁面中,因此,在描述相對路徑時,應該使用被引用的文檔或素材相對于引用JS文件的頁面之間的相對路徑。
例如,文檔“/www/yanet/index.html”中引用了JS文件“/www/yanet.cn/js/hello.js”,而在該JS中生成一段引用素材“/www/yanet/images/1.jpg”的html代碼,則在這段代碼中,其相對路徑應該是“./images/1.jpg”或“images/1.jpg”,而不能是“../images/1.jpg”。
在CSS中引用圖片相對路徑:CSS文件是指在頁面中引用的外部樣式定義文件,該文件通常用于定義頁面中各種html標記的顯示效果(例如文本的字體名稱、字體大小、縮進、邊距等),CSS文件中同樣可以引用外部的素材或文檔(例如設置某個DIV對象的背景圖片)。和JS文件不同,瀏覽器認為CSS文件也是一個獨立的文檔,因此,在CSS中對素材的引用可以通過計算素材文件和該CSS文件之間的相對路徑來實現,而與引用該CSS文件的頁面所在的位置無關。
例如,文檔“/www/yanet/index.html”中引用了CSS文件“/www/yanet/css/main.css”,而在該CSS中引用了素材“/www/yanet/images/1.jpg”,則在CSS中對于該素材引用的相對路徑應該是“../images/1.jpg”,而不能是“./images/1.jpg”或“images/1.jpg”。
簡單的說就是js中引用圖片是根據引用的頁面去定位圖片路徑的;css中引用圖片是根據css文件來定位圖片路徑的。所以最好在js中定義一個全局的圖片路徑,方便更改。