转自：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 {

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

JavaScript与CSS相对路径引用的差异的更多相关文章

  1. CSS与JS中的相对路径引用

    javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件, ...

  2. 用绝对路径引用JS、CSS

    项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...

  3. 关于WEB-INF目录不提供外部访问及JSP引用 js，css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  4. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  5. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  6. 同一网站中HTML相对路径引用

    ../表示目录的上一级 如:一个网站文件夹text里有HTML,JS,CSS....文件夹,HTML文件夹有个text.html, JS文件夹有个text.js, CSS文件夹中有个text.css. ...

  7. 前端html、Javascript、CSS技术小结

    简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...

  8. 5种JavaScript和CSS交互的方法

      分享   分享   分享   分享   分享   随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...

  9. 5种你未必知道的JavaScript和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

随机推荐

  1. BZOJ 2301 [HAOI2011]Problem b (分块 + 莫比乌斯反演)

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 6519  Solved: 3026[Submit] ...

  2. Fastjson和Gson零碎总结

    一:用于测试的类 User类 import lombok.Data; import lombok.experimental.Accessors; /** * @author silentdoer * ...

  3. cyclone IV中DDR的一个报错{Too many output and bidirectional pins per VCCIO and ground pair in I/O bank 8 }

    Error (169224): Too many output and bidirectional pins per VCCIO and ground pair in I/O bank 8 when ...

  4. ACtiveMQ中间件-发布订阅模式

    前言:ActiveMQ学习心得 1.MQ是什么 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信, ...

  5. Linux上的TIME_WAIT和tcp_fin_timeout

    当Linux服务器的TIME_WAIT过多时,通常会想到去修改参数降低TIME_WAIT时长,以减少TIME_WAIT数量,但Linux并没有提供这样的接口,除非重新编译内核. Linux默认的TIM ...

  6. android 线程中断的处理

    android.view.WindowManager$BadTokenException: Unable to add window -- token android.os.BinderProxy@4 ...

  7. 使用Xshell在Windows系统和Linux系统之间进行文件传输

    版权声明:本文为转载内容. 原博客内容https://blog.csdn.net/love666666shen/article/details/75742077 Windows系统在安装虚拟机cent ...

  8. 14.关键字final

    在程序设计中,我们有时可能希望某些数据是不能够改变的,这个时候final就有用武之地了.final是java的关键字,它所表示的是“这部分是无法修改的”.不想被改变的原因有两个:效率.设计.使用到fi ...

  9. Monkey学习网址

    http://***/2015/12/24/Android-Monkey-Test/ http://bbs.pediy.com/showthread.php?t=189584 http://***/2 ...

  10. 微信小游戏canvas操作

    这几天在做项目的时候,想在游戏画面之前,在Canvas上面画上一张背景图,代码如下     let ctx = canvas.getContext('2d')    export default cl ...