(轉)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://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文件多在不同的網頁上引用,他們有不同的宿主環境,所以使用被調用的路徑做基准路徑是安全的,但使用調用者的路徑作為基准路徑會造成路徑錯誤,無法加載。通常情況下,js不僅僅是一個html在於,特別對於動態網頁而言,js中的路徑引用應該采用絕對路徑,可以通過定義一個全局變量如path來活動項目的真實路徑(像jsp中就可以用request.getSession().getServletContext().getRealPath(“/”)),然后在每個路徑上加上path(path+你的路徑)從而取出路徑錯誤的問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM