zoukankan      html  css  js  c++  java
  • JavaScript与CSS相对路径引用的差异

    转自:http://blog.csdn.net/luohuidong01/article/details/74938652

    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 {
         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文件的位置作为参考的基准点。

  • 相关阅读:
    Codeforces Round #161 (Div. 2)
    Codeforces Round #160 (Div. 2)
    Codeforces Round #159 (Div. 2)
    Codeforces Round #157 (Div. 2)
    世界树的考验「NOIP多校联考 2019」
    最大异或和
    腿部挂件「NOIP多校联考 2019」
    玩具取名「HAOI2008」
    涂色「CQOI2007」
    唱、跳、rap 和篮球「TJOI2019」
  • 原文地址:https://www.cnblogs.com/chenshao/p/7526776.html
Copyright © 2011-2022 走看看