如果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. springmvc学习笔记(18)-json数据交互

    springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...

  2. python使用cx_oracle连接oracle数据库

    http://www.oracle.com/technetwork/topics/linuxx86-64soft-092277.html---下载instantclient-basic-linux.x ...

  3. [网页游戏开发]Morn组件赋值

    在讲解List之前,我们先介绍一下Morn组件赋值功能 默认属性赋值 界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如: 界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myC ...

  4. RedHat 安装Hadoop并运行wordcount例子

    1.安装 Red Hat 环境 2.安装JDK 3.下载hadoop2.8.0 http://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/had ...

  5. 线程安全 对StringBuilder抛出ArrayIndexOutOfBoundsException的探究

    对StringBuilder抛出ArrayIndexOutOfBoundsException的探究 - CSDN博客 https://blog.csdn.net/liu_005/article/det ...

  6. How do I set the timeout for a JAX-WS webservice client?

    How do I set the timeout for a JAX-WS webservice client? up vote58down votefavorite 27 I've used JAX ...

  7. java.lang.IllegalStateException: No instances available for localhost

    在SpringCloud的项目中,我们使用了自动配置的OAuth2RestTemplate,RestTemplate,但是在使用这些restTemplate的时候,url必须是服务的名称,如果要调用真 ...

  8. NEU 1685: All Pair Shortest Path

    题目描述 Bobo has a directed graph G with n vertex labeled by 1,2,3,..n. Let D(i,j) be the number of edg ...

  9. iconfont的图文混排

    最近在使用iconfont排版,但是发现完全没法混到textarea中. 希望借助 contentEditable 解决这个问题

  10. ie的兼容方法，条件注释的方法

    1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]&g ...