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

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.css

复制代码

代码如下:

#imgtest 

background-image:url(../../site/images/index_02.jpg); 
width:500px; 
height:50px; 
border:solid 1px red; 

test.js 
function writeimg() 

document.write(“<img src=’images/index_02.jpg’ />”); 
}

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>

从例子,我们注意到css引用的是css目录与index_02.jpg的关系,js引用的是test.htm目录与与index_02.jpg的关系。但一般时候我们的css和js文件多在不同的网页上引用,他们有不同的宿主环境,所以使用被调用的路径做基准路径是安全的,但使用调用者的路径作为基准路径会造成路径错误,无法加载。通常情况下,js不仅仅是一个html在于,特别对于动态网页而言,js中的路径引用应该采用绝对路径,可以通过定义一个全局变量如path来活动项目的真实路径(像jsp中就可以用request.getSession().getServletContext().getRealPath(“/”)),然后在每个路径上加上path(path+你的路径)从而取出路径错误的问题。

时间: 2024-10-13 20:29:58

(转)CSS与JS中的相对路径引用简单介绍的相关文章

5)关于CSS和js静态文件引入路径

(1)参考资料   thinkphp5手册      视图--->输出替换 (2)方法(1)在我们的application中,找到config.php,在里面输入这样的配置: 1 <?php 2 // +---------------------------------------------------------------------- 3 // | ThinkPHP [ WE CAN DO IT JUST THINK ] 4 // +--------------------------

html css和js中的注释

一.HTML的注释方法 <!-- html注释:START --> 内容 <!-- html注释:END --> 包含在“<!--”与“-->”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中. 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二.CSS的注释方法 <style type="text/css"> /* css注释*/ </style> 在单独的css样式表文件中也采用此方法

javaScript系列:js中获取时间new Date()详细介绍

var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天) 何问起 hovertree.commyDate.getTime(); //获取当前时

JS中的对象和方法简单剖析

众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): Dates ,Maths,Regexps,Arrays,Funcitons,当然Objects,这些都是对象: JS中,所有值,除了原生值,都是对象:这些原生值包括:strings,numbers('3.14'),true,false,null和undefined 对象是包含变量的变量,js变量可

iOS开发中获取文件路径的方法介绍

1.首先要知道什么是沙盒? 沙盒就是每一个应用程序安装完毕之后在本地生成的一个文件夹,就叫做沙盒文件.下面是沙盒的一个路径展示: 可以看到: iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么?下面就详细的一一道来: 分别是:documents,tmp,app,Library. 而获取APP的沙盒的函数是:(NSHomeDirectory(), 手动保存的文件在documents文件里 Nsuserdefaults保存的文件在Prefe

js中获取时间new Date()详细介绍

var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)         // 所以获取当前月份是myDate.getMonth()+1; myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)m

js中 原始值和引用值

在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 原始值-----存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置; 引用值-----存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处. 如果一个值是引用类型的,那么它的存储空间将从堆中分配.由于引用值的大小会改变,所以不能把它放在栈中,否则 会降低变量查寻的速度.相反,放在变量的栈空间中的值是该对象存储在堆中的地址.地址的大小是固定的,

JS中的this变量的使用介绍

脚本之家 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 代码如下: var obj = {}; obj.x = 100; obj.y

js中的Map对象的简单示例

es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.size相当于java中的Map.size()://在js中size是属性,在Map中size()是方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"