如果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. 【POJ 1716】Integer Intervals（差分约束系统）

    id=1716">[POJ 1716]Integer Intervals(差分约束系统) Integer Intervals Time Limit: 1000MS   Memory L ...

  2. 基于DM642 RAW采集格式的视频驱动开发及应用

    摘 要:为解决C64X系列数字信号处理器(DSP)视频驱动不能应用于原始数据格式(RAW)采集格式的问题,设计了DM642和电耦合元件(CCD)高清传感器的数据传输接口,并分析.修改用于标准格式的视频 ...

  3. Reveal查看任意app的高级技巧

    本文转载至 http://blog.csdn.net/wbdwsqwwn/article/details/40476139 Reveal是一个很强大的UI分析工具,与其他几个功能相近的工具(比如Pon ...

  4. wx.request的并发问题

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/ 在同时并发10个request请求测试时: 不使用WePY: 使用 ...

  5. HUST1017 Exact cover —— Dancing Links 精确覆盖 模板题

    题目链接:https://vjudge.net/problem/HUST-1017 1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 7673 次提交 3898 次 ...

  6. YTU 1068: 复制字符串

    1068: 复制字符串 时间限制: 1 Sec  内存限制: 128 MB 提交: 602  解决: 382 题目描述 有一字符串,包含n个字符.写一函数,将此字符串中从第m个字符开始的全部字符复制成 ...

  7. YTU 2456: 评委打分

    2456: 评委打分 时间限制: 1 Sec  内存限制: 128 MB 提交: 283  解决: 52 题目描述  一个歌唱比赛,比赛每次会从观众中随即抽取几名观众给分(观众至少有5个,分数为0~1 ...

  8. pkg-config相关

    编译fuse的命令 gcc myfuse.c -o myfuse `pkg-config fuse --cflags --libs` 中的 pkg-config fuse --cflags --lib ...

  9. 理解Objective-C Runtime （五）协议与分类

    Objective-C中的分类允许我们通过给一个类添加方法来扩充它(但是通过category不能添加新的实例变量),并且我们不需要访问类中的代码就可以做到. Objective-C中的协议是普遍存在的 ...

  10. NIO知识摘录

    在 JDK 1. 4 中 新 加入 了 NIO( New Input/ Output) 类, 引入了一种基于通道和缓冲区的 I/O 方式,它可以使用 Native 函数库直接分配堆外内存,然后通过一个 ...