zoukankan      html  css  js  c++  java
  • CSS与JS中的相对路径引用简单介绍

    javascript和css文件中采用相对路径,其基准路径是完全不同的。

    1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件,则index.php即为宿主)所处位置为基准。

    2.css引用资源(比如图片)相对路径是以.css文件所处位置为基准!

    大家在html中通常会导入一些外部的css、js文件,而其中一个比较容易被忽视的问题就是路径问题,有时候,我们在css、js中都有通过路径来引入一张图片的需求,当我们采用相对路径的时候,在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。

    举个例子来说明这个问题。

    假如我们有如下文件目录树:(是文件夹)
    –site
    ——images
    ———index_02.jpg
    ——test.htm

    –css
    ——css
    ———-test.css

    –js
    ——js
    ———-test.js

    引用代码如下:

    test.htm

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
    <html xmlns=”http://www.w3.org/1999/xhtml” > 
    <head> 
    <title>test</title> 
    <script type=”text/javascript” src=”../js/js/test.js”></script> 
    <link href=”../css/css/test.css” rel=”stylesheet” type=”text/css” /> 
    </head> 
    <body> 
    <script type=”text/javascript”> 
    writeimg(); 
    </script> 
    <div id=”imgtest”></div> 
    </body> 
    </html> 
    View Code

    test.js

    function writeimg() 
    { 
    document.write(“<img src=’images/index_02.jpg’ />”); 
    } 
    View Code

    test.css

    #imgtest 
    { 
    background-image:url(../../site/images/index_02.jpg); 
    500px; 
    height:50px; 
    border:solid 1px red; 
    } 
    View Code
  • 相关阅读:
    zoj 3195 Design the city LCA Tarjan
    hdu 2586 How far away ? 离线LCA
    洛谷 P3379 【模板】最近公共祖先(LCA)Tarjan离线
    codeforces #446 892A Greed 892B Wrath 892C Pride 891B Gluttony
    设计模式(16)---原型模式
    设计模式(15)---享元模式
    设计模式(14)---组合模式
    设计模式(13)---外观模式
    设计模式(12)---适配器模式
    设计模式(11)---代理模式
  • 原文地址:https://www.cnblogs.com/LJLLY/p/9072099.html
Copyright © 2011-2022 走看看