Different image paths in CSS and JavaScript

When I was writing front-end code, I often encountered a problem when setting the image path. For example, I

(1) A new "Images" folder is created under the root directory, with a picture top.gif in it

(2) Two other Folders "CSS" and "JS" are created under the root directory to save the. CSS file and. JS file (assuming we use "test.css" and "test. JS ")

Assume that there is a "test.html" file under the root directory, which 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 tag in test.html

<Div id = "TOP">

<P> just for test! </P>

</Div>

If you want to set the background image of the tag whose ID is top, write in "test.css" as follows:

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

Write in test. js as follows:

Document. getelementbyid ("TOP"). style. Background = "images/top.gif ";

It can be found that there are obvious differences between the two. This problem has been plagued for a long time, but it has been hard to figure out why. I finally found the answer on Google.

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

(1) For JS scripts, HTML is right. The script is loaded into the page for parsing (it is the same as writing your JS script directly on this page)

(2) The CSS file only provides a connection and does not load it into the HTML page. In this example, HTML uses the link to search for the desired image file in the CSS file

The difference between the two is very important. When we want to reference an image, the HTML path that references it should prevail in the JS file, while in the CSS file, change the CSS path.

 

If any error occurs, please correct it .....

References: http://blog.csdn.net/gideal_wang/archive/2009/03/06/3962254.aspx