CSS, picture path settings in JavaScript

There are differences between CSS path settings and JavaScript path settings:

The image settings in 1.css are determined according to the file path of the CSS itself.

The picture path settings in 2.javascript are set according to the ". html,aspx,asp,jsp" Path of the referenced JavaScript page.

Before writing the front end code, there is often a problem in the settings of the picture path. For example, I

(1) Under the root directory of a new "images" folder, which put a picture top.gif

(2) in the root directory under the addition of a new two folders "CSS" and "JS" specifically used to store the use of the. css files and. js files (assuming we use the "Test.css" and "Test.js")

Suppose there is a "test.html" file in the root directory that references "Test.css" and "Test.js" respectively.

<link type= "Text/css" href= "Css/test.css" rel= "stylesheet"/>

<script type= "Text/javascript" src= "Js/test.js" ></script>

There is such a label in the test.html

<div id= "Top" >

<p>just for Test!</p>

</div>

If I want to set the background picture of the label with ID top, write this in "Test.css":

#top {Background:url (. /images/top.gif); }

It's written in Test.js:

document.getElementById ("Top"). style.background= "Images/top.gif";

Can be found that the two are obviously different, was plagued by this problem for a long time, but has been unclear what is the reason, Google on the internet, finally found the answer.

In HTML pages, the mechanism for referencing JS scripts and CSS files is different.

(1) For JS script, HTML is the bar script loaded into the page together parsing (and your JS script directly written on this page is the same)

(2) For CSS files, it simply provides a connection and does not load it into an HTML page, as in this case, HTML searches the CSS file for the desired picture file based on the link.

The difference between the two is very important, when we want to refer to a picture, in the JS file to reference it in the path of the HTML, and in the CSS file, to change the CSS path should prevail.