引入Html中的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代码
?
?
?以上说明,对于js和cs中的路径引用,如果采用相对路径的话,其基准路径是有区别的。通常情况下,js不仅仅是一个html在于,特别对于动态网页而言,js中的路径引用应该采用绝对路径,可以通过定义一个全局变量如path来活动项目的真实路径(像jsp中就可以用request.getSession().getServletContext().getRealPath("/")),然后在每个路径上加上path(path+你的路径)从而取出路径错误的问题。
?
总结:在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。
?