如果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. [WF4.0 实战] 事件驱动应用

    看到题目或许非常多人都会疑问,为什么要使用事件监听呢? 眼下的认识: 1,使用事件监听能够将工作流的结点返回值返回到client 2,能够实现等待与重新启动,相当于之前的WaitActivity创建B ...

  2. CycleViewPager

    https://github.com/zhaozhentao/CycleViewPager

  3. AML LCD debuged

    root@k101:/ # cat /sys/class/lcd/debug                                          Usage:     echo basi ...

  4. sed 常用命令

    删除以ifeq开头的行 sed -i "/^ifeq/d" file 删除空行 sed -i '/^$/d' file

  5. 深入浅出 - Android系统移植与平台开发（九）- Android系统system_server及Home启动

    3.3 Zygote守护进程与system_server进程 Android的执行环境和Java执行环境有着本质的差别,在Android系统中每一个应用程序都是一独立的进程,当一个进程死掉时,不会影响 ...

  6. VS2005断点失效的问题

    VS2005下使用VC,部分断点无效,显示『当前不会命中断点.还没有为该文档加载任何符号』. 试过以下一些方法: 1.无效断点所在的项目和启动项目的设置:项目->属性->配置属性-> ...

  7. Micro Frontends

    Micro Frontends - extending the microservice idea to frontend development https://micro-frontends.or ...

  8. adb常用命令整理

    adb connect <IPAddress:Port>  //通过指定的IP地址及端口连接设备 adb devices  //显示所有已连接的设备 adb install <Pac ...

  9. HDU3555 Bomb —— 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 Bomb Time Limit: 2000/1000 MS (Java/Others)    M ...

  10. string interpolation in sql server

    https://sqlserver.dev129.com/2018/01/29/string-interpolation-in-t-sql/ Most programming languages ha ...