您的位置：首页 > Web前端 > JavaScript

JavaScript与CSS相对路径引用的差异

2017-07-11 08:40 274 查看
JS跟CSS相对路径引用的差异在于他们的参考点不一样，下面举个例子说明一下。

文件目录如下

|—— css
|   |__ myStyle.css
|—— script
|   |__ myScript.js
|—— images
|   |__ myImage.jpg
|—— index.html


HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
<div>示例文字</div>
<img src="" alt="">
</body>
</html>
<script src="script/myScript.js"></script>


我们利用CSS将myImage.jpg作为div元素的背景图片

div {
width: 300px;
height: 300px;
background: url('../images/check.png');
}


我们再利用JS将img元素更改为显示myImage.jpg

window.onload = initPage;

function initPage() {
var imgs = document.getElementsByTagName("img");
imgs[0].src = "images/check.png";
}


请注意看一下CSS跟JS中的相对引用路径。css中的相对引用路径，是以CSS文件自身作为参考的基准点来写。而JS的相对引用路径，确是以使用这个外部JS文件的HTML文件的位置作为参考的基准点。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript css
相关文章推荐
新的分享
章节导航