如果js、css外部文件有使用到相对路径时，需要注意其相对路径的基准是不一样的。

比如说，在index.html中引用到了外部的js和css文件，这两个文件都通过相对路径引用了某一张图片；这些文件所在的目录如下：

.

├── js

|   └── index.js

├── css

|   └── index.css

├── images

|   └── bg.jpg

└── index.html

js文件的相对路径是以引用该js文件的页面为基准，所以在js文件中的相对路径是：

function changeImage(){

    document.body.style.backgroundImage="url(images/bg.jpg)";

}

css文件的相对路径是以自身的位置为基准，所以在css文件中的相对路径是：

.index_bg {

    background-image: url(../images/bg.jpg);

}

index.html的代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>index</title>

<link rel="stylesheet" href="css/index.css" type="text/css">

</head>

<body>

<h1>Hello World!</h1>

<div class="index_bg"></div>

<br>

<button type="button" onclick="changeImage()">设置背景图片</button>

<script src="js/index.js"></script>

</body>

</html>

总结

  • js文件的相对路径是以引用该js文件的页面为基准
  • css文件的相对路径是以自身的位置为基准

js、css外部文件的相对路径问题的更多相关文章

  1. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  2. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  3. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  4. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...

  5. ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

    写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...

  6. asp.net net::ERR_ABORTED 500 (Internal Server Error) 无法加载JS CSS等文件的解决方法

    网站换服务器,部署上去后打开首页,js .css等文件始终无法加载,经过排查,问题出现在web.config文件中. <defaultDocument> <files> < ...

  7. html, js,css应用文件路径规则

    web前端一般常用文件 .html .css .js.但是当用css文件和html引入资源(比如图片)时,路径可能不相同.下面总结了几条. 使用相对路径引入规则: html或者js引入图片,按照htm ...

  8. vue组件如何引入外部.js/.css/.scss文件

    可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...

  9. Laravel 加载 js css image 文件

    写在前面的话: 1.前提是需要使用blade模板引擎 2.css js image 文件夹建在laravel 的 public 目录下面 3.生成的路径默认都是相对路径 A: 加载css文件 (用下面 ...

随机推荐

  1. CPU维修技术

    中央处理单元(Central Process Unit)简称CPU,是电脑的核心部件,负责处理和运算电脑内部所有数据.因其在电脑中的地位相当重要,所以一旦发生故障就会造成很严重的后果. [技术66]开 ...

  2. 基于bootstrap_博客页面

    <!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <h ...

  3. java类加载机制的代码实例

    package typeinfo; import java.util.Random; class Initable { static final int staticFinal = 47 ; stat ...

  4. 修改flash builder注释里的@author

    在flash builder里,按Ctrl+Shift+D可以很方便在添加AsDoc注释.可是有些生成的@author是系统的用户名(如:administor),怎么修改这个为自己的名字呢? Step ...

  5. 漫谈程序猿系列：无BUG不生活

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  6. iOS UIButton选中状态切换

    UIButton*payBtn = [UIButtonbuttonWithType:UIButtonTypeCustom]; payBtn.frame=CGRectMake(size.width-24 ...

  7. Java 线程池ThreadPoolExecutor简单应用

    什么是线程池: 线程池就是控制线程的一个池子.用来控制线程数量. 为什么要使用线程池: 1.避免系统反复创建和销毁线程影响执行的时间(创建+销毁>>执行时间时) 2.控制线程数量.线程过多 ...

  8. split+ Pattern切割字符串

    今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...

  9. Xamarin.Android 实现虾米音乐搜索下载

    之前写过一篇博客,用api接口实现虾米音乐搜索功能,不过这个api接口被封了,所以只能获取到官方的一个音乐json数据,里面的下载地址是被加密过得,这里我会教大家如何用xamarin实现. 准备工作: ...

  10. 运用Links方法安装插件

    方法如下: (1)在Eclipse的安装目录下新建两个文件夹:一个用来存放插件,取名为myplugins:另一个用来存放link文件,取名为links. (2)将下载的插件解压缩到myplugins目 ...