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 ...
随机推荐
- 大文件断点上传 js+php
/* * js */ function PostFile(file, i, t) { console.log(1); var name = file.name, //文件名 size = fi ...
- C++编译器详解（三）函数调用的区别：_cdecl以及_stdcall
1._stdcall是Pascal程序的缺省调用方式,通常用于Win32 API中,函数采用从右到左的压栈方式,自己在退出时清空堆栈.VC将函数编译后会在函数名前面加上下划线前缀,在函数名后加上&qu ...
- Docker mysql 主从
一.独立容器部署mysql主从 # 主从 my.cnf加上 [mysqld] server-id = XXX log-bin = mysql-bin log-bin-index = log-bin.i ...
- linux上安装rabbitMQ
本次环境搭建centos7及Erlang环境otp_src_19.3.tar.gz 和rabbitmq-server-generic-unix-3.6.14.tar.zx RabbitMQ是流行的开源 ...
- javascript的Mixins
mixin在javascript里可以看作是一种从别的对象"借用"功能的方法.每一个新定义的对象都有一个 prototype属性,其他的对象就可以从这里"借用" ...
- _编程语言_C_C++_数据结构_struct
Struct 语句,访问成员使用 点结构. Example: #include <iostream> #include <cstring> using namespace st ...
- Maven的插件管理
<pluginManagement> 这个元素和<dependencyManagement>相类似,它是用来进行插件管理的. 在我们项目开发的过程中,也会频繁的引入插件,所以解 ...
- npm 及安装
一.npm nodejs使开发者摆脱了浏览器的束缚,一系列基于nodejs的应用和工具不断出现,无论是在node应用的开发,还是使用中,包管理都扮演着一个很重要的作用.NPM(node package ...
- 自动化构建工具gradle安装教程（使用sdkman安装）
gradle是什么?(wiki解释) Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具.它使用一种基于Groovy的特定领域语言来声明项目设置,而不是传统的 ...
- Hibernate在PostgreSQL上执行sum函数导致数据失真的问题
有一段通过Hibernate从PostgreSQL上进行sum统计的简单代码,但统计结果却导致数据失真,不知原因何在,求指教! Java代码片段如下: public List<Object> ...