转自：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. 何时使用Delegate或接口

    在以下情况下使用Delegates很有用: 调用一个单一方法: 一个类要进行方法规范(method specification)的多种执行: 使用一个静态方法来执行规范: 想获得类似事件设计的模式: ...

  2. Java实现FTP批量大文件上传下载篇1

    本文介绍了在Java中,如何使用Java现有的可用的库来编写FTP客户端代码,并开发成Applet控件,做成基于Web的批量.大文件的上传下载控件.文章在比较了一系列FTP客户库的基础上,就其中一个比 ...

  3. Java EE Servlet 几个path

    ContextPath Context ['kɒntekst] 不识庐山真面目,只缘身在此山中. 相对路径 RealPath 绝对路径 ServletPath 就是servlet-mapping 中 ...

  4. switch()语句

    语法: switch(expression){ case value:statement break; case value:statement break; case value:statement ...

  5. day24（JAVAWEB上传与下载）

    javaWeb上传与下载 上传: 上传方式: jspSmartUpload   :应用在jsp上的文件上传与下载组件. FileUpload            :用用在jaava环境上的上传的功能 ...

  6. 20169207《Linux内核原理与分析》第九周作业

    第九周的实验依旧和往常的一样,主要包括两部分.一是1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第13,14章.二是学习MOOC「Linux内 ...

  7. 第71讲：Scala界面Panel、Layout实战详解

    今天学习了王家林老师scala讲座的第71讲,scala界面编程panel实战.让我们一起来看一下. 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark 关注微信账号,获取更多关于王家林老师的 ...

  8. 计算几何---凸包问题（Graham/Andrew Scan ）

    概念 凸包(Convex Hull)是一个计算几何(图形学)中的概念.用不严谨的话来讲,给定二维平面上的点集,凸包就是将最外层的点连接起来构成的凸多边型,它能包含点集中所有点的.严谨的定义和相关概念参 ...

  9. 基于MATLAB的腐蚀膨胀算法实现

    本篇文章要分享的是基于MATLAB的腐蚀膨胀算法实现,腐蚀膨胀是形态学图像处理的基础,腐蚀在二值图像的基础上做“收缩”或“细化”操作,膨胀在二值图像的基础上做“加长”或“变粗”的操作. 什么是二值图像 ...

  10. imooc movie

    node+mongodb 建站攻略(一期) 用的都是我熟悉的技术,看了别人的开发过程,自己也学到了一些新的知识 生成配置文件 开发结束后,可以使用bower init来生成前端的配置文件. 不过在bo ...