小记——CSS 和 JS 中关于图片路径的问题
来源:互联网 发布:2016年新疆旅游数据 编辑:程序博客网 时间:2024/05/16 10:37
首先看一下这张图,也就是项目中的文件存储位置:
今天下午再写 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)'});
顺便再说一句: ../ 代表当前文件的上层目录
注:以上所说路径均为相对路径。
- 小记——CSS 和 JS 中关于图片路径的问题
- css和js引用图片的路径问题
- 通过struts.xml配置映射后的jsp引入外部css和js的路径问题及css中图片url路径问题
- nodejs 中引用css和js的路径问题
- html中css和js引用的路径问题
- css和js中资源路径问题
- javaweb中关于引用css和image的路径问题
- 母版页中引用图片、外部js、css文件的路径问题
- 母版页中引用图片,外部js、css文件的路径问题
- Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题
- html中关于图片路径的问题
- 关于Tp中图片路径的问题
- CI 引入JS,CSS,图片的路径问题
- maven关于jsp页面加载图片和css路径的问题
- 关于iOS项目中引入Html5文件(html/js/css)的路径问题
- ThinkPHP的调用css,js和图片的路径
- 一个关于css中图片相对路径引用的示例
- 用eclipse写web项目中jsp导入图片和css文件的路径问题
- 计数排序和基数排序
- POJ - 1703 Find them, Catch them(种类并查集)
- 软件测试之神对话
- 23个EMBA老板跟明星私募上炒股课 巨亏逾亿元
- Android 网络连接——ConnectivityManager网络管理器
- 小记——CSS 和 JS 中关于图片路径的问题
- swift中的闭包
- linux sched.c
- java中的<?><T><E>详解Jdk5.0新特性Generic Types (泛型)
- 絮叨一下最近的那些人那些事
- Android Fragment 你应该知道的一切
- 华为 统计大写字母个数
- Codeforces 295A Greg and Array
- Python如何调用R:rpy2使用介绍