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


 

django css样式,图片路径问题解决方案

在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True  同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os...
  • DXLDeHuaLi
  • DXLDeHuaLi
  • 2015年08月26日 11:55
  • 1089

css和js引用图片的路径问题

原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部Jav...
  • u012463017
  • u012463017
  • 2016年07月19日 17:29
  • 7051

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

关于CSS中使用相对路径获取的图片在不同浏览器中显示情况差异的问题。
  • hd12081224
  • hd12081224
  • 2015年12月15日 11:36
  • 702

css判断不同分辨率显示不同宽度布局实现自适应宽度

css判断不同分辨率显示不同宽度布局实现自适应宽度 CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以...
  • bestlove12345
  • bestlove12345
  • 2016年07月19日 10:06
  • 1809

css判断不同分辨率显示不同宽度布局实现自适应宽度

CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年03月28日 00:27
  • 2033

【CSS外部引入的路径】

【CSS外部引入的路径】 CSS外部引入的路径 CSS外部引入的路径 相对路径 以引用文件之网页所在位置为参考基础,而建立出的目...
  • M_agician
  • M_agician
  • 2017年05月21日 00:24
  • 1058

JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应

JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应 function writeText(txt) { ...
  • dongzhongyan
  • dongzhongyan
  • 2017年02月21日 11:12
  • 754

webpack打包过程中因为图片的路径导致的问题

最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: ...
  • u012863664
  • u012863664
  • 2017年05月23日 15:51
  • 9062

JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件

JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件 function getBrowser() { var ua = window.navigator.userA...
  • mazhili1991
  • mazhili1991
  • 2016年12月01日 15:14
  • 2935

用eclipse写web项目中jsp导入图片和css文件的路径问题

最近在写java 网页项目,遇到很多奇奇怪怪的问题,最让我头疼的就是导入图片和css样式的问题。开始导入css样式后根本没有任何作用,迫于无奈,就在jsp的标签中写的css代码,结果代码越写越长,弄得...
  • hydhyd0
  • hydhyd0
  • 2017年06月05日 22:25
  • 1449
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css和javascript中图片路径的不同
举报原因:
原因补充:

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