相对路径

时间：2019-07-21 20:15:36 阅读：62 评论：0 收藏：0 [点我收藏+]

绝对路径
绝对路径就是文件在磁盘上真正的路径，在网络中，以http开头的链接都是绝对路径。
G:\web\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="width:400px;" />
        <img src=./baicai.jpg style="width:400px;" />
        <img src=baicai.jpg style="width:400px;" />
        <img src=/ziyu.jpg style="width: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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)