JavaScript与CSS相对路径引用的差异
转自：http://blog.csdn.net/luohuidong01/article/details/74938652
JS跟CSS相对路径引用的差异在于他们的参考点不一样，下面举个例子说明一下。
文件目录如下
|—— css
| |__ myStyle.css
|—— script
| |__ myScript.js
|—— images
| |__ myImage.jpg
|—— index.html
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
<div>示例文字</div>
<img src="" alt="">
</body>
</html>
<script src="script/myScript.js"></script>
我们利用CSS将myImage.jpg作为div元素的背景图片
div {
width: 300px;
height: 300px;
background: url('../images/check.png');
}
我们再利用JS将img元素更改为显示myImage.jpg
window.onload = initPage;
function initPage() {
var imgs = document.getElementsByTagName("img");
imgs[0].src = "images/check.png";
}
请注意看一下CSS跟JS中的相对引用路径。
css中的相对引用路径，是以CSS文件自身作为参考的基准点来写。
而 JS 的相对引用路径，是以调用这个JS文件的HTML文件的位置作为参考的基准点。
JavaScript与CSS相对路径引用的差异的更多相关文章
- CSS与JS中的相对路径引用
javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件, ...
- 用绝对路径引用JS、CSS
项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...
- 关于WEB-INF目录不提供外部访问及JSP引用 js，css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- asp.net后台代码动态添加JS文件和css文件的引用
首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...
- vue+webpack静态资源路径引用
处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...
- 同一网站中HTML相对路径引用
../表示目录的上一级 如:一个网站文件夹text里有HTML,JS,CSS....文件夹,HTML文件夹有个text.html, JS文件夹有个text.js, CSS文件夹中有个text.css. ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- 5种JavaScript和CSS交互的方法
分享 分享 分享 分享 分享 随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...
- 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...
随机推荐
- hadoop sqoop的常用名命令
1 列出所有的ambari数据库中所有的表 Sqoop list-tables -connect jdbc:mysql://localhost:3306/ambari -username ambar ...
- 容器,表格 ,div,元素可左右拖动,滚动 css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 论文翻译技巧--Notepad替换回车
- c3p0使用
c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> ...
- 如何比较两个xml 的异同
http://www.xmlunit.org/ <dependency> <groupId>org.xmlunit</groupId> <ar ...
- oracle 监听文件 说明
MAR:电脑笔记 不做整理 .. ORACLE_SID=orcl2 instance_name=sicca 静态注册文件中SID_NAME=ORACLE_SID 动态注册的时候是用的instance_ ...
- 有趣的CSS3背景 斜条纹
今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现 .noaccess { position: absolute; width: 300px; height: 100px; z-index: ...
- hdu 1443 Joseph【约瑟夫环】
题目 题意:一共有2k个人,分别为k个好人和k个坏人,现在我们需要每隔m个人把坏人挑出来,但是条件是最后一个坏人挑出来前不能有好人被挑出来..问最小的m是多少 约瑟夫环问题,通常解决这类问题时我们把编 ...
- 《mysql必知必会》学习_第三章_20180724_欢
P16: use crashcourse; #选择数据库#使用crashcouse这个数据库,因为我没有crashcourse这个数据库,所以用我的hh数据库代替. P17: show databas ...
- openresty + lua 2、openresty 连接 redis，实现 crud
redis 的话,openresty 已经集成,ng 的话,自己引入即可. github 地址:https://github.com/openresty/lua-resty-redis github ...