转自：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. Location对象的查询字符方法实现

    function getQueryStringArgs(){ /*如果location.search有则删除第一个字符,并返回删除后的字符串*/ var gs = (location.search.l ...

  2. 微信小程序两种滑动方式

    竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style ...

  3. 01-Javascript简介

    Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript的组成 Java ...

  4. Cacti Install Error

    Cacti Error happened while installing: ERROR: Your MySQL TimeZone database is not populated. Please ...

  5. leetcode-[3]Max Points on a Line

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line 思 ...

  6. Job Interview: Why Only 3 Questions Really Matter

    Even for the most fearless amongst us, job interviews can be nerve wracking. In order to give us the ...

  7. （动态规划）Worm -- hdu -- 2151

    http://acm.hdu.edu.cn/showproblem.php?pid=2151 Worm Time Limit: 1000/1000 MS (Java/Others)    Memory ...

  8. codeforces815A Karen and Game 2017-06-27 15:22 31人阅读 评论(0) 收藏

    C. Karen and Game time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...

  9. Digital Roots—HDU1013 2016-05-06 10:25 85人阅读 评论(0) 收藏

    Digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  10. 14：super关键字

    本小节知识点: 1.super基本概念 2.super的作用 1.super基本概念 super是个编译器的指令符号,只是告诉编译器在执行的时候,去调谁的方法. self是一个隐私参数; self r ...