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

  • 相关阅读:
    compose 函数实现
    垂直居中的实现方式
    数组去重方法总结
    前端性能优化
    简简单单的几个正则表达式
    ES6
    Vue不兼容IE8原因以及Object.defineProperty详解
    Vuex(二)——关于store
    Vuex(一)——vuejs的状态管理模式
    关于REST的浅显了解
  • 原文地址:https://www.cnblogs.com/chenshao/p/7526776.html
Copyright © 2011-2022 走看看