CSS與JS中的相對路徑引用簡單介紹

字號:


    javascript和css文件中采用相對路徑,其基準路徑是完全不同的。
    1.javascript引用資源(比如圖片)相對路徑是以宿主路徑(被引用的網頁比如你在首頁index.php引用了某js文件,則index.php即為宿主)所處位置為基準。
    2.css引用資源(比如圖片)相對路徑是以.css文件所處位置為基準!
    大家在html中通常會導入一些外部的css、js文件,而其中一個比較容易被忽視的問題就是路徑問題,有時候,我們在css、js中都有通過路徑來引入一張圖片的需求,當我們采用相對路徑的時候,在css和js中引用圖片的相對路徑的基準是不一樣的。在css中出現的相對路徑,是以css文件所在路徑為基準的,而js中的路徑則是以導入此js的網頁文件所在的位置為基準的。
    舉個例子來說明這個問題。
    假如我們有如下文件目錄樹:(\是文件夾)
    –\site
    ——\images
    ———index_02.jpg
    ——test.htm
    –\css
    ——\css
    ———-test.css
    –\js
    ——\js
    ———-test.js
    引用代碼如下:
    test.css
    代碼如下:
    #imgtest
    {
    background-image:url(../../site/images/index_02.jpg);
    width:500px;
    height:50px;
    border:solid 1px red;
    }
    test.js
    function writeimg()
    {
    document.write(“<img src=’images/index_02.jpg’ />”);
    }
    test.htm
    代碼如下:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://pic02.newdu.com/uploads/202504/02/html>BR    從例子,我們注意到css引用的是css目錄與index_023627.jpg的關系,js引用的是test.htm目錄與與index_02.jpg的關系。但一般時候我們的css和js文件多在不同的網頁上引用,他們有不同的宿主環(huán)境,所以使用被調用的路徑做基準路徑是安全的,但使用調用者的路徑作為基準路徑會造成路徑錯誤,無法加載。通常情況下,js不僅僅是一個html在于,特別對于動態(tài)網頁而言,js中的路徑引用應該采用絕對路徑,可以通過定義一個全局變量如path來活動項目的真實路徑(像jsp中就可以用request.getSession().getServletContext().getRealPath(“/”)),然后在每個路徑上加上path(path+你的路徑)從而取出路徑錯誤的問題。