本篇內(nèi)容介紹了“CSS與JS中的相對路徑引用的實例介紹”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站制作、電商網(wǎng)站制作開發(fā)、微信小程序定制開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

javascript和css文件中采用相對路徑，其基準(zhǔn)路徑是完全不同的。

1.javascript引用資源(比如圖片)相對路徑是以宿主路徑(被引用的網(wǎng)頁比如你在首頁index.php引用了某js文件，則index.php即為宿主)所處位置為基準(zhǔn)。

2.css引用資源(比如圖片)相對路徑是以.css文件所處位置為基準(zhǔn)!

大家在html中通常會導(dǎo)入一些外部的css、js文件，而其中一個比較容易被忽視的問題就是路徑問題，有時候，我們在css、js中都有通過路徑來引入一張圖片的需求，當(dāng)我們采用相對路徑的時候，在css和js中引用圖片的相對路徑的基準(zhǔn)是不一樣的。在css中出現(xiàn)的相對路徑，是以css文件所在路徑為基準(zhǔn)的，而js中的路徑則是以導(dǎo)入此js的網(wǎng)頁文件所在的位置為基準(zhǔn)的。

舉個例子來說明這個問題。

假如我們有如下文件目錄樹：（\是文件夾）
–\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(“”);
}

test.htm

代碼如下:

從例子，我們注意到css引用的是css目錄與index_02.jpg的關(guān)系，js引用的是test.htm目錄與與index_02.jpg的關(guān)系。但一般時候我們的css和js文件多在不同的網(wǎng)頁上引用，他們有不同的宿主環(huán)境，所以使用被調(diào)用的路徑做基準(zhǔn)路徑是安全的，但使用調(diào)用者的路徑作為基準(zhǔn)路徑會造成路徑錯誤，無法加載。通常情況下，js不僅僅是一個html在于，特別對于動態(tài)網(wǎng)頁而言，js中的路徑引用應(yīng)該采用絕對路徑，可以通過定義一個全局變量如path來活動項目的真實路徑（像jsp中就可以用request.getSession().getServletContext().getRealPath(“/”)），然后在每個路徑上加上path（path+你的路徑）從而取出路徑錯誤的問題。

“CSS與JS中的相對路徑引用的實例介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文題目：CSS與JS中的相對路徑引用的實例介紹-創(chuàng)新互聯(lián)
鏈接地址：http://m.jcarcd.cn/article/djihdh.html