css和javascript中图片路径的不同
之前在写前端代码时,在图片路径的设置那里经常会遇到一个问题.比方说,我
(1)在根目录下面新建了个"images"文夹,里面放了张图片top.gif
(2)在根目录下另外新建了两个文件夹"CSS"和"JS"专门用来存放用到的.css文件和.js文件(假设我们用到的为"test.css"和"test.js")
假设在根目录下有个"test.html"文件,里面分别引用了"test.css"以及"test.js"
link type="text/css" href="CSS/test.css" rel="stylesheet"/
script type="text/javascript" src="JS/test.js" /script
在test.html中有这样一个标签
div id="top"
p Just for test! /p
/div
如果这时我要设置id为top的标签的背景图片,在"test.css"里这样写:
#top{ background:url(../images/top.gif); }
在test.js里面这样写:
document.getElementById("top").style.background="images/top.gif";
可以发现两者有明显的不同,被这问题困扰了很久,却一直搞不清楚是什么原因,在网上google了下,终于找到了答案.
html页面中,引用js脚本和css文件的机制是不一样的.
(1)对于js脚本,html是吧脚本加载到页面中一起解析(就跟你的js脚本直接写在这个页面是一样的)
(2)而对css文件,则仅仅是提供一个连接,并不会将其加载到html页面中,如在本例中,html根据链接去css文件中寻找所需要的图片文件
这两者的区别很重要,当我们要引用一个图片时,在js文件中要以引用它的html的路径为准,而在css文件中,要以改css路径为准.
如有错误,欢迎指正.....
IDEA maven web项目无法加载css,js,image等一系列路径问题 我们大二班级 刚刚学习maven 控制台输出 和mybatis的时候我提前进入学习的路程自己摸索 maven web开发 遇到了各种配置环境还有运行报错一大堆的问题, 前面的问题都属于环境配置看我之前的博客吧 这里主要讲解路径问题 步入:很多新手按照之前的步骤 部署网站的时候 发现css,js,image,还有各种有关路径的引入都无法显示,因为这些静态资源很有可能被spring拦截 方案:必须在web.xml文件中设置其为可加载资源
js用参数生成路径 我们在处理路线/路径时常做很多工作,我们总是需要对其进行操作。 当我们需要生成带有参数的路径以将浏览器推送到那里时,generatePath 可以帮助我们!
相关文章
- JavaScript基础修炼(14)——WebRTC在浏览器中如何获得指定格式的PCM数据【华为云分享】
- CSS - 工具类 tool.css
- jquery对象和javascript对象相互转换
- 基于HTML,css,jQuery,JavaScript,MySQL搭建博客系统
- JavaScript使用localStorage缓存Js和css文件
- 前端三剑客:html,css,JavaScript
- [Javascirpt] What’s new in JavaScript (Google I/O ’19)
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Prototype, hasOwnProperty(), valueOf() and toString() methods.
- [Javascript] Broadcaster + Operator + Listener pattern -- 8. Pass a Done Symbol when an Async Function is Done
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript Crocks] Safely Access Nested Object Properties with `propPath`
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Case insensitive sorting for string arrays
- [Javascript] Logging Pretty-Printing Tabular Data to the Console
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript]网页调用打印机
- 从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)
- 前端学习:javascript基本知识
- 用javascript编写的简单计算器
- javascript异步延时载入及推断是否已载入js/css文件
- Javascript 的严格模式 use strict
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- JavaScript 表单