CSS與JS中的相對路徑引用的實例介紹

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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設、北川羌族網(wǎng)站維護、網(wǎng)站推廣。

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

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

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

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

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

假如我們有如下文件目錄樹：（\是文件夾）
–\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://www.w3.org/1999/xhtml” >
<head>
<title>test</title>
<script type=”text/javascript” src=”../js/js/test.js”></script>
<link href=”../css/css/test.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<script type=”text/javascript”>
writeimg();
</script>
<div id=”imgtest”></div>
</body>
</html>

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

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

網(wǎng)站名稱：CSS與JS中的相對路徑引用的實例介紹
鏈接分享：http://vcdvsql.cn/article34/gjdise.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站維護、Google、網(wǎng)站建設、用戶體驗、云服務器

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS與JS中的相對路徑引用的實例介紹