如果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. Qt中 QString 和int，double等的转换

    Qt中 int ,float ,double转换为QString 有两种方法 1.使用 QString::number(); 如: long a = 63; QString s = QString:: ...

  2. PandoraBox 支持3G无线上网卡(联通卡3G卡)（一）

    一:笔者采用的是系统是OpenWrt之PandoraBox,内核版本3.3.8:硬件设备是MTK的7620开发板. 其中怎么搭建openwrt开发环境在此不用多说,因为既然想实现3G无线上网卡拨号上网 ...

  3. mysql语句:SET NAMES UTF8

    一直以来只知道mysql_query("SET NAMES UTF8");是设定数据库编码的,但是一直不清楚“SET NAMES UTF8”是什么. 直到今天才知道 SET NAM ...

  4. AppFuse 3的乱码问题

    书接上回:AppFuse 3常见问题与解决方法,一个新问题:乱码! 在3.0.0版本号下,运行mvn appfuse:full-source命令后使用mvn jetty:run启动工程,页面上就出现了 ...

  5. 2016/06/02 网摘记录 svn 服务器端 客户端 安装使用

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html http://www.cnblogs.com/xiaobaihom ...

  6. POJ1651 Multiplication Puzzle —— DP 最优矩阵链乘 区间DP

    题目链接:https://vjudge.net/problem/POJ-1651 Multiplication Puzzle Time Limit: 1000MS   Memory Limit: 65 ...

  7. RegistryView

    https://docs.microsoft.com/en-us/dotnet/api/microsoft.win32.registryview?view=netframework-4.7 On th ...

  8. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  9. 类、对象(java基础知识六)

    1.Java约定俗成 java约定俗成 1,类名接口名 一个单词首字母大写,多个单词每个单词首字母都大写 2,方法名和变量名 一个单词全部小写,多个单词从第二个单词首字母大写 建议:如果能用英语尽量用 ...

  10. Android API中的对话框

    Android API中提供了四个Dialog的自定义子类: AlertDialog ProgressDialog DatePackerDialog TimePickerDialog 也可以派生出自己 ...