CSS与JS中的相对路径引用简单介绍

当我们在HTML文档中使用CSS和JS时，通常需要用相对路径引用外部的CSS和JS文件，以使页面样式和脚本被正确应用。下面是关于如何在CSS和JS中使用相对路径的详细介绍。

CSS中的相对路径引用

在HTML文档中，可以通过<link>标签来引用CSS文件，例如：

<link rel="stylesheet" href="style.css">

这行代码告诉浏览器，将样式从外部文件"style.css"引入到当前页面。在CSS文件中，使用相对路径引用其他资源时，相对路径的起点是CSS文件所在的位置。

例如，如果我们在CSS文件中要引用图片，可以使用background-image属性，然后使用相对路径引用这个图片：

body {
  background-image: url('../images/bg.jpg');
}

在上述代码中，../表示返回到上级目录，所以路径是从CSS文件所在的目录开始的。

JS中的相对路径引用

类似于CSS，我们可以通过<script>标签来引用JS文件。例如：

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

同样，在JS文件中，相对路径的起点也是该JS文件所在的位置。如果我们要引用其他资源，例如图片或其他JS文件，可以使用相对路径来引用。

例如，在JS文件中引用图片，可以使用new Image()来创建一个图片对象，然后使用相对路径来设置图片的src：

var img = new Image();
img.src = '../images/logo.png';

在上述代码中，../表示返回到上级目录，所以路径是从JS文件所在的目录开始的。

示例说明

假设我们的网站的文件结构如下：

- index.html
- css/
  - style.css
- js/
  - script.js
- images/
  - logo.png
  - bg.jpg

我们在HTML中引用CSS和JS：

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

在CSS中，如果要引用背景图片bg.jpg，应该这样写：

body {
  background-image: url('../images/bg.jpg');
}

在JS中，如果要引用logo.png，应该这样写：

var img = new Image();
img.src = '../images/logo.png';

需要注意的是，在引用JS文件时，如果JS文件中使用了相对路径来引用其他资源，也是以该JS文件所在位置为起点的。因此，在编写JS代码时，应该注意相对路径的起点。