本文主要是介绍CSS、JS中的相对路径引用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
初学者由于对一些比较基本的知识的把握不是很牢，所以在开发或者设计的时候，往往很容易出现一些错误或者异常现象而找不到出错的根源。记得自己刚刚java入门的时候，会出现一些很“离奇”的现象，然后一遍一遍查看自己的代码，一步一步的进行调试（当然那个时候的调试方式也只是从初学这的角度上而言的，大多是比较粗略的手段），还是发现不了哪里出了问题，这直接打击学习的积极性。甚至有时候，照着书本或者教学视频敲的实例代码也不能正常跑起来，不知道大家有没有这种悲催的感觉。
比如说，大家在html中通常会导入一些外部的css、js文件，而其中一个比较容易被忽视的问题就是路径问题，有时候，我们在css、js中都有通过路径来引入一张图片的需求，当我们采用相对路径的时候，在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。
为了很好的说明这个问题，我们写一个简单的切换图片的js特效，刚开始的时候，我们让html有一副默认的背景图，通过css来设计，而当用户单击“切换背景图”按钮时，通过javascript代码来控制背景图的变更，效果如下：
图一：更改背景图之前的效果图
图二：更改背景图之后的效果图
我们的文件结构是这样的：
/index.html
/js/chbk.js
/css/style.css
/images/bk1.jpg、bk2.jpg
1. style.css代码
@charset "utf-8";
/* CSS Document */
body{background-color:#ccc;}
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
#in{margin:auto;text-align:center;}
其中，url(../images/bk.jpg)路径是相对于style.css的。
2.chbk.js代码
// JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}
其中，url(images/bk2.jpg)路径是相对于index.html的，而不是chbk.js的url(../images/bk.jpg)。
3.index.html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引入Html中的css、js的路径问题</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/chbk.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
</div>
<div id="in">
<input class="in" type="button" value="单击我更改背景" onclick="chbk()" />
</div>
</body>
</html>
以上说明，对于js和cs中的路径引用，如果采用相对路径的话，其基准路径是有区别的。
通常情况下，js不仅仅是一个html在于，特别对于动态网页而言，js中的路径引用应该采用绝对路径，可以通过定义一个全局变量如path来活动项目的真实路径（像jsp中就可以用request.getSession().getServletContext().getRealPath("/")），然后在每个路径上加上path（path+你的路径）从而取出路径错误的问题。
总结：在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。
转载自：http://www.cnblogs.com/xuxiace/archive/2012/03/06/2381874.html
这篇关于CSS、JS中的相对路径引用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
