js、css外部文件的相對路徑問題


如果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文件的相對路徑是以自身的位置為基准


免責聲明!

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



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