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 ...
随机推荐
- 传输层TCP
/*************************************************************************************************** ...
- 【应用】for：批量修改文件名
## @echo off setlocal EnableDelayedExpansion rem set string=suffix for %%i in (*.txt) do ( set name= ...
- tlink平台数据转发 c# 控制台程序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...
- Eclipse怎么全局搜索和替换（整个项目）
我们用Eclipse编程,有时候需要将整个项目的某个字符串替换成其他的.那么我们该怎么操作呢?请接着往下看! 一,我们首先打开Eclipse,单击要替换字符串的项目 二,按下组合键:ctrl + H, ...
- Leetcode--136. Single Number(easy)
Given a non-empty array of integers, every element appears twice except for one. Find that single on ...
- 万能头文件#include <bits/stdc++.h>
最近在做题的时候看到别人的题解发现别人都用这个 突然之间打开新世界的大门 去百度之后才知道#include <bits/stdc++.h>包含了目前所有的c++头文件 也就是说只要用#in ...
- Android中的假TabHost-只是在上层覆盖了一层TabWidget
TabHost是整个Tab的容器,包含TabWidget和FrameLayout两个部分,TabWidget是每个Tab的表情,FrameLayout是Tab内容. 实现方法:继承TabActivit ...
- shell 命令 ls -a
接手其他人的shell脚本时,遇到了一个"."开头的文件目录, ll 始终找不到. 咨询了一下,才知道,"."开头的是隐藏文件. 这时候用 ll -a 或 ls ...
- spring security文档地址
https://docs.spring.io/spring-security/site/docs/4.1.0.RELEASE/reference/htmlsingle/
- foreach控件的运用（非原创）http://blog.chinaunix.net/uid-26884465-id-3416869.html
人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习,一方面可以让初学者有所见即所得的信心,另一方面,其实也是在初学者心中留下了对这事物的一个朦胧的印象,这在以后 ...