相对路径

绝对路径
绝对路径就是文件在磁盘上真正的路径,在网络中,以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)"
    }
}

效果如下

原文地址:https://www.cnblogs.com/fanful/p/11222318.html