CSS、JS中的相對路徑引用

阿新 • • 發佈：2019-01-19

初學者由於對一些比較基本的知識的把握不是很牢，所以在開發或者設計的時候，往往很容易出現一些錯誤或者異常現象而找不到出錯的根源。記得自己剛剛java入門的時候，會出現一些很“離奇”的現象，然後一遍一遍檢視自己的程式碼，一步一步的進行除錯（當然那個時候的除錯方式也只是從初學這的角度上而言的，大多是比較粗略的手段），還是發現不了哪裡出了問題，這直接打擊學習的積極性。甚至有時候，照著書本或者教學視訊敲的例項程式碼也不能正常跑起來，不知道大家有沒有這種悲催的感覺。

　　比如說，大家在html中通常會匯入一些外部的css、js檔案，而其中一個比較容易被忽視的問題就是路徑問題，有時候，我們在css、js中都有通過路徑來引入一張圖片的需求，當我們採用相對路徑的時候，在css和js中引用圖片的相對路徑的基準是不一樣的。在css中出現的相對路徑，是以css檔案所在路徑為基準的，而js中的路徑則是以匯入此js的網頁檔案所在的位置為基準的。

　　為了很好的說明這個問題，我們寫一個簡單的切換圖片的js特效，剛開始的時候，我們讓html有一副預設的背景圖，通過css來設計，而當用戶單擊“切換背景圖”按鈕時，通過javascript程式碼來控制背景圖的變更，效果如下：

圖一：更改背景圖之前的效果圖

圖二：更改背景圖之後的效果圖

我們的檔案結構是這樣的：

/index.html

/js/chbk.js

/css/style.css

/images/bk1.jpg、bk2.jpg

1. style.css程式碼

@charset "utf-8";
/* CSS Document */body{background-color:#ccc 
;}#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}#in{margin:auto;text-align:center;}

其中，url(../images/bk.jpg)路徑是相對於style.css的。

2.chbk.js程式碼

// JavaScript Documentfunction chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}

其中，

url(images/bk2.jpg)路徑是相對於index.html的，而不是chbk.js的url(../images/bk.jpg)。

3.index.html程式碼

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引入Html中的css、js的路徑問題</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/chbk.js" type="text/javascript"></script>
</head>

<body>
<div id="content">
</div>
<div id="in">
<input class="in" type="button" value="單擊我更改背景" onclick="chbk()" />
</div>

</body>
</html>

以上說明，對於js和cs中的路徑引用，如果採用相對路徑的話，其基準路徑是有區別的。

通常情況下，js不僅僅是一個html在於，特別對於動態網頁而言，js中的路徑引用應該採用絕對路徑，可以通過定義一個全域性變數如path來活動專案的真實路徑（像jsp中就可以用request.getSession().getServletContext().getRealPath("/")），然後在每個路徑上加上path（path+你的路徑）從而取出路徑錯誤的問題。

總結：在css中出現的相對路徑，是以css檔案所在路徑為基準的，而js中的路徑則是以匯入此js的網頁檔案所在的位置為基準的。

轉載自：http://www.cnblogs.com/xuxiace/archive/2012/03/06/2381874.html

CSS、JS中的相對路徑引用

CSS、JS中的相對路徑引用

SpringBoot頁面跳轉訪問css、js等靜態資源引用無效解決（六）

CSS及HTML、js中的資源路徑問題

nginx 解決css、js請求路徑無法加載問題

Django中簡單添加HTML、css、js等文件

Webpack 中 css import 使用 alias 相對路徑

引用外部.css或.js檔案的路徑問題

Jenkins持續整合——巧妙解決無法開啟引用CSS、JS的HTML頁面問題

前端框架Vue（13）——vue 中如何對公共css、 js 方法進行單檔案統一管理，全域性呼叫

Vue.js中的圖片引用路徑

IOS開發（7）WKWebView載入本地HTML、CSS、JS檔案JS（解決html內訪問其他資源路徑問題）

JavaScript與CSS相對路徑引用的差異

【2017-05-21】WebForm跨頁面傳值取值、C#服務端跳轉頁面、 Button的OnClientClick屬性、Js中getAttribute和超鏈接點擊彈出警示框。

Joomla T3模板啟用CSS、JS優化

JS基礎--函數與BOM、DOM操作、JS中的事件以及內置對象

javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

Spring-Boot整合freemarker引入靜態資源css、js等（轉）

使用gulp自動化打包合並前端靜態資源（CSS、JS文件壓縮、添加版本號）

復習HTML、CSS、JS練習題

jsp 文件無法加載 css、js 的問題

CSS、JS中的相對路徑引用

相關推薦