css和javascript中图片路径的不同

转载 2016年05月31日 19:42:03
之前在写前端代码时,在图片路径的设置那里经常会遇到一个问题.比方说,我


(1)在根目录下面新建了个"images"文夹,里面放了张图片top.gif


(2)在根目录下另外新建了两个文件夹"CSS"和"JS"专门用来存放用到的.css文件和.js文件(假设我们用到的为"test.css"和"test.js")


假设在根目录下有个"test.html"文件,里面分别引用了"test.css"以及"test.js"


<link type="text/css" href="CSS/test.css" rel="stylesheet"/>


<script type="text/javascript" src="JS/test.js"></script>


在test.html中有这样一个标签


<div id="top">


<p>Just for test!</p>


</div>


如果这时我要设置id为top的标签的背景图片,在"test.css"里这样写:


#top{ background:url(../images/top.gif); }


在test.js里面这样写:


document.getElementById("top").style.background="images/top.gif";


可以发现两者有明显的不同,被这问题困扰了很久,却一直搞不清楚是什么原因,在网上google了下,终于找到了答案.


html页面中,引用js脚本和css文件的机制是不一样的.


(1)对于js脚本,html是吧脚本加载到页面中一起解析(就跟你的js脚本直接写在这个页面是一样的)


(2)而对css文件,则仅仅是提供一个连接,并不会将其加载到html页面中,如在本例中,html根据链接去css文件中寻找所需要的图片文件


这两者的区别很重要,当我们要引用一个图片时,在js文件中要以引用它的html的路径为准,而在css文件中,要以改css路径为准.


 


如有错误,欢迎指正.....


参考资料:http://blog.csdn.net/gideal_wang/archive/2009/03/06/3962254.aspx


 

相关文章推荐

css中图片路径,以及在不同浏览器的兼容问题

关于CSS中使用相对路径获取的图片在不同浏览器中显示情况差异的问题。

css ,javascript中的图片路径设置

css路径设置跟javascript路径设置是有区别的:1.css中的图片设置是根据css本身的文件路径去确定。2.javascript中的图片路径设置是根据被引用的javascript的页面【.ht...

css ,javascript中的图片路径设置

css路径设置跟javascript路径设置是有区别的: 1.css中的图片设置是根据css本身的文件路径去确定。 2.javascript中的图片路径设置是根据被引用的javascript的页面...

jetty处理请求路径与tomcat的不同,图片出不来

数据库中存的路径是/upload/2014/07/10/1404956103602.jpg 访问时根据项目路径拼出来的绝对路径是

JSP页面URL转发跳转不同路径图片的思考!

一个页面请求传到服务器上,如果服务器将这个请求转发到另外一个服务地址上,并且不告诉浏览器我做了跳转,这样的话,浏览器实际上访问的是另外一个服务器上的内容,而浏览器自己却是不知道的。 好比X在A商家网...

android拍照后图片路径的获取(解决不同手机存在拍照后旋转的问题)

调用拍照功能: Intent openCameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResu...

html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

实现图片在容器累垂直居中有多种方法,例如使用计算高度使用margin,透明gif图片+背景定位等等,其中很多方法比较繁琐兼容性也不好,例如用position方法。下面为大家介绍两种比较简洁的方法,一种...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)