Relative path references in CSS and JS

Relative path references in CSS and JS

Beginners because of some relatively basic knowledge of the grasp is not very strong, so in the development or design, it is often very easy to appear some errors or abnormal phenomena and can not find the source of the error. Remember that I just started in Java, there will be some very "bizarre" phenomenon, and then over and over again to see their own code, step-by-Step debugging (of course, at that time the debugging mode is only from the point of view of the beginner, mostly relatively rough means), or find out where the problem, This directly blows the enthusiasm of learning. Even sometimes, the example code that reads a book or teaching video can not run normally, do not know that everybody has this kind of sad urge feeling.

For example, everyone in the HTML will usually import some external CSS, JS files, and one of the more easily overlooked problem is the path problem, sometimes, we are in CSS, JS in the path to introduce a picture of the demand, when we use the relative path, The reference to the relative path of the picture in CSS and JS is not the same. The relative path that appears in CSS is based on the path where the CSS file is located, while the path in JS is based on the location of the Web page file that imports this JS.

In order to explain the problem well, we write a simple switch image JS special effects, at the beginning, we let the HTML has a default background, through CSS design, and when the user clicks the "Toggle Background map" button, through the JavaScript code to control the background map changes, the effect is as follows:

Figure I: an effect chart before changing a background image

Figure II: Effect chart after changing background image

Our file structure is this:

/index.html

/js/chbk.js

/css/style.css

/images/bk1.jpg, 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;}

where the URL (.. /images/bk.jpg) path is relative to Style.css.

2.chbk.js Code

JavaScript Document
function chbk () {
document.getElementById (' content '). style.backgroundimage= ' URL ( images/bk2.jpg) ';
}

where the URL (images/bk2.jpg) path is relative to the index.html, not the 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 ">
 
The above description, for JS and CS in the path reference, if the relative path, the benchmark path is different.

In general, JS is not only an HTML is, especially for dynamic Web pages, JS path reference should take the absolute path, you can define a global variable such as path to the real path of the project (like JSP can be used request.getsession (). Getservletcontext (). Getrealpath ("/"), then add path (path+ your path) to each path to remove the problem.


  Summary: The relative path that appears in CSS is based on the path where the CSS file is located, while the path in JS is based on the location of the Web page file that imports this JS.