如果js、css外部文件有使用到相對路徑時,需要注意其相對路徑的基准是不一樣的。
比如說,在index.html中引用到了外部的js和css文件,這兩個文件都通過相對路徑引用了某一張圖片;這些文件所在的目錄如下:
.
├── js
| └── index.js
├── css
| └── index.css
├── images
| └── bg.jpg
└── index.html
js文件的相對路徑是以引用該js文件的頁面為基准,所以在js文件中的相對路徑是:
function changeImage(){
document.body.style.backgroundImage="url(images/bg.jpg)";
}
css文件的相對路徑是以自身的位置為基准,所以在css文件中的相對路徑是:
.index_bg {
background-image: url(../images/bg.jpg);
}
index.html的代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<h1>Hello World!</h1>
<div class="index_bg"></div>
<br>
<button type="button" onclick="changeImage()">設置背景圖片</button>
<script src="js/index.js"></script>
</body>
</html>
總結
- js文件的相對路徑是以引用該js文件的頁面為基准
- css文件的相對路徑是以自身的位置為基准