小记——CSS 和 JS 中关于图片路径的问题

首先看一下这张图，也就是项目中的文件存储位置：

        今天下午再写 js 时遇到了一个问题，比如在 CONTACT.html（见上图）  中有一个buton 和 一个 img 标签，点击 button 时让 img 更换图片（简单起见，我们假设只有2张图片 a.ipg 和 b.jpg进行切换）。对于更换图片，我开始写的 js 代码是这样的：

$(this).css({'background-image':'url(../img/st_folder.gif)'});

$(this).css({'background-image':'url(../img/st_folder_open.gif)'});

        （摘取自代码，这里仅讲一下问题所在）。。

        运行后发现，图片根本不能切换，，仔细瞅瞅，图片的路径确实按照我的要求更改了，每次单击，图片的路径都会切换，但是图片就是不切换。。神马原因呢？当时我哪儿会知道！！瞅了半天，把代码重新倒腾了几遍，图片还是出不来（看到这里，你可知道问题出在哪儿？）。。感觉可简单的一个问题，当时就特别郁闷，完全不知道哪儿不对。没有办法，只能向旁边的人求助了，，谁知道人家看一眼就把问题给找出来了（感觉好丢人啊。。）。毫无疑问，是路径的错误。

        谨记：当我们在 CSS  中引用图片路径时，是相对于这个 CSS 文件本身而言的，比如，我们在 css 的 style.css 中引用了 img 中的一个 a.jpg，那么路径为 url(../img/a.jpg)；这个想必大家都知道，，但是当我们在 js 文件中引用图片时，路径是相对于调用这个 js 文件的 html   页面的，而不是相对于这个 js 文件本身的，比如，我们在 js  下的 script.js 中要引用 img 下的图片 b.jpg ，这个 script.js   是在 CONTACT.hml 页面中调用的，那么这里的图片路径就是相对于 CONTACT.html 的。。

所以，当我把以上两句代码做了如下修改之后，便没有问题了。。

$(this).css({'background-image':'url(img/st_folder.gif)'});

$(this).css({'background-image':'url(img/st_folder_open.gif)'});

        顺便再说一句：   ../ 代表当前文件的上层目录

        注：以上所说路径均为相对路径。