转自：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. castapp.js颜色配置

    1  修改head的背颜色 (1) header添加class  publicHead <header class="mui-bar mui-bar-nav publicHead&qu ...

  2. 手机开发-Android

    Android 语言.JAVA 开发环境.一是JDKjava开发工具包,二是eclipse开发工具IDE,三是Android SDK安卓软件开发包,四是ADT Android开发工具把JDK和Andr ...

  3. （转）Log4Net 全方位跟踪程序运行

    转自:http://www.cnblogs.com/qingyuan/archive/2011/05/13/2045616.html 前端日子自己写了一个简单的日志跟踪程序,现在目前正在做的一个项目中 ...

  4. Java理论学时第四节。课后作业。

    请查看String.equals()方法的实现代码,注意学习其实现方法. public class StringEquals { public static void main(String[] ar ...

  5. 项目管理系统Redmine（v1.1.2）安装手记

    一.环境   1.硬件 普通PC.   2.软件 Windows 2003操作系统.   二.下载必要的软件   1.Ruby 1.8.x Redmine是基于Ruby On Rails的软件,所以首 ...

  6. 2017-2018-1 20155326 《信息安全系统设计基础》第四周学习总结及myod改进版的补交

    2017-2018-1 20155326 <信息安全系统设计基础>第四周学习总结及myod改进版的补交 学习内容 补充完成课上没有完成的内容 学习教材附录A,第十章内容 参考别出心裁的Li ...

  7. spring父子Ioc容器的关系

    在网上找了一下,没有直接解说ioc父子容器关系的文章,所以大概看了下代码,自己写下吧,写俩行做个笔记. 1. 在进行dean的注册的时候,父容器和子容器是互不干扰的,各自注册自己的 2. 在实例化的时 ...

  8. Java方法、构造方法的重载；创建对象；调用方法

    方法的重载 概念:多个同名但是不同参数的方法称为方法的重载 作用:编译器会根据调用时传递的实际参数自动判断具体调用的是哪个重载方法 特点:方法名相同:同一作用域:参数不同:数量不同 类型不同 顺序不同 ...

  9. python之函数2

    Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...

  10. 4.动态HTML处理和机器图像识别

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...