Differences between relative path references in CSS and JS
On: http://www.cnblogs.com/xuxiace/archive/2012/03/06/2381874.html
Beginners are not very familiar with some basic knowledge. Therefore, during development or design, they are prone to errors or exceptions and cannot find the root cause of errors. I remember that when I was just getting started with Java, there would be some strange phenomena, and I checked my code again and again, one-step debugging (of course, the debugging method at that time was just from the beginner's point of view, and most of them were rough methods). I still cannot find any problems, this directly strikes the enthusiasm of learning. Sometimes, even the example code produced by reading books or teaching videos cannot run normally. I wonder if you have such a sad reminder.
For example, some external CSS and JS files are usually imported in HTML, and one of the problems that are easy to ignore is the path problem. Sometimes, we have the need to introduce an image through a path in CSS and JS. When we adopt a relative path, the reference of the relative path of the image referenced in CSS and JS is different. The relative path that appears in CSS is based on the path of the CSS file, while the path in JS is based on the location of the webpage file that imports this JS file.
To better illustrate this problem, we wrote a simple JS special effect for switching images. At the beginning, we asked HTML to have a default background image, which was designed through CSS, when you click the "Switch background image" button, you can use JavaScript code to control background image changes. The effect is as follows:
Figure 1: Change
Figure 2: after changing the background image
Our file structure is as follows:
/Index.html
/JS/chbk. js
/CSS/style.css
/Images/bk1.jpg1_bk2.jpg
1. style.css code
@charset "utf-8";
/* CSS Document */
body{background-color:#ccc;}
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
#in{margin:auto;text-align:center;}
The URL (../images/bk.jpg? is relative to style.css.
2. chbk. JS Code
// JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}
Among them, URL (images/bk2.jpg1_ is relative to index.html, rather than chbk. js URL (../images/bk.jpg ).
3.index.html code
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> introduce CSS and JS paths in HTML </title>
<Link href = "CSS/style.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT src = "JS/chbk. js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body>
<Div id = "content">
</Div>
<Div id = "in">
<Input class = "in" type = "button" value = "click I Change Background" onclick = "chbk ()"/>
</Div>
</Body>
</Html>
As described above, the reference paths in JS and Cs are different if relative paths are used.
In general, JS is not just an HTML, but especially for dynamic web pages, path references in JS should adopt absolute paths, you can define a global variable such as path to activity the real path of the project (like in JSP, you can use request. getsession (). getservletcontext (). getrealpath ("/"), and then add path (path + your path) to each path to retrieve the path error.
Summary: The relative path in CSS is based on the path where the CSS file is located, while the path in JS is based on the location where the webpage file imported to this JS file is located.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
