CSS与JS中的相对路径引用简单介绍

2018-06-24 02:08:05来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

javascript和css文件中采用相对路径,其基准路径是完全不同的。

1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件,则index.php即为宿主)所处位置为基准。

2.css引用资源(比如图片)相对路径是以.css文件所处位置为基准!

大家在html中通常会导入一些外部的css、js文件,而其中一个比较容易被忽视的问题就是路径问题,有时候,我们在css、js中都有通过路径来引入一张图片的需求,当我们采用相对路径的时候,在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。

举个例子来说明这个问题。

假如我们有如下文件目录树:(\是文件夹)
–\site
——\images
———index_02.jpg
——test.htm

–\css
——\css
———-test.css

–\js
——\js
———-test.js

引用代码如下:

test.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml” > 
<head> 
<title>test</title> 
<script type=”text/javascript” src=”../js/js/test.js”></script> 
<link href=”../css/css/test.css” rel=”stylesheet” type=”text/css” /> 
</head> 
<body> 
<script type=”text/javascript”> 
writeimg(); 
</script> 
<div id=”imgtest”></div> 
</body> 
</html> 
View Code

test.js

function writeimg() 
{ 
document.write(“<img src=’images/index_02.jpg’ />”); 
} 
View Code

test.css

#imgtest 
{ 
background-image:url(../../site/images/index_02.jpg); 
width:500px; 
height:50px; 
border:solid 1px red; 
} 
View Code

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS高程学习笔记:JS函数基本使用

下一篇:自实现jQuery版分页插件