绝对路径
绝对路径就是文件在磁盘上真正的路径，在网络中，以http开头的链接都是绝对路径。
G:webhtmlindex.html
http://localhost:9300/html/index.html
相对路径
相对路径就是相对于当前文件的路径，网页中一般使用相对路径。
./ 代表当前目录
../ 代表上一层目录
/ 代表根目录
index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>相对路径与绝对路径</title> <link rel="stylesheet" href="../css.css" type="text/css"/> </head> <body> <img src=../image/wugeng.jpg style="400px;" /> <img src=./baicai.jpg style="400px;" /> <img src=baicai.jpg style="400px;" /> <img src=/ziyu.jpg style="400px;" /> <div class="zhouwang"></div> <div id="daji" class="daji"></div> <input id="btn" type="button" value="show"/> </body> </html> <script type="text/javascript" src="../js/js/index.js"></script>
css.css
.zhouwang{ width: 509.291px; height: 298px; background-image:url(zhouwang.png); background-size:100% 100%; -moz-background-size:100% 100%; } .daji{ width: 509.291px; height: 298px; background-size:100% 100%; -moz-background-size:100% 100%; }
index.js
window.onload=function(){ document.getElementById("btn").onclick=function(){ document.getElementById("daji").style.backgroundImage = "url(../../daji.jpg)" } }
效果如下
