转自：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. for循环添加的闭包问题

    function test(){ var arr = []; for (var i=0;i;i++){ arr[i] = function(){ console.log(i); } } return ...

  2. ThinkPHP3.2.3：使用模块映射隐藏后台真实访问地址

    例如:项目应用目录/Application下模块如下,默认后台模块为Admin 现在需要修改后台模块的访问地址,以防被别有用心的人很容易就猜到,然后各种乱搞... (在公共配置文件/Applicati ...

  3. AIX 补丁升级

    下载地址:http://www-933.ibm.com/support/fixcentral 1.root登陆系统: 2.对系统进行备份或者克隆(见上一篇抄袭IBM官方文档的文章): 3.官方建议为/ ...

  4. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  5. mac中导出CSV格式在excel中乱码

    1 - 首先需要查看文档的编码格式: 安装enca:  brew install enca 使用命令 enca  file路径即可查到文件的编码格式 Universal transformation ...

  6. java基础-day8

    第08天 常用API 今日内容介绍 u API概述 u Scanner类与String类 u StringBuilder类 第1章   API概述 1.1      API概念 API(Applica ...

  7. 分类算法之朴素贝叶斯分类(Naive Bayesian classification)

    1.1.摘要 贝叶斯分类是一类分类算法的总称,这类算法均以贝叶斯定理为基础,故统称为贝叶斯分类.本文作为分类算法的第一篇,将首先介绍分类问题,对分类问题进行一个正式的定义.然后,介绍贝叶斯分类算法的基 ...

  8. pm2

    使用PM2将Node.js的集群变得更加容易(http://www.cnblogs.com/jaxu/p/5193643.html) nodejs pm2配置使用教程(http://blog.csdn ...

  9. ios 百度地图，火星坐标，地球坐标互转

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  10. ASP.NET写的一个博客系统

    由于域名闲置,正好也有服务器空间,短期内开发了一个博客系统. 大家都来谈  http://www.djdlt.com 目前是开放注册,免费发布.(限于空间有限,图片还是尽量少传些) 网站架构: ASP ...