雖然JavaScript文件與CSS文件差別很大，但是由於利用JavaScript可以控制CSS樣式，因此它們之間仍然存在某些關聯和容易混淆的概念性操作。
對於CSS文件來說，樣式所引用的外部文件的路徑都是以代碼所在位置作為參考來進行設置的，而JavaScript恰恰相反，它是以所引用的網頁位置作為參考進行設置的。
例如，有這麼一個簡單的站點結構，網頁文件位於根目錄，而CSS文件、JavaScript文件和圖像文件都位於根目錄下images文件夾中，如圖9.7所示。
圖 9.7 一個簡單站點結構
下面分別使用CSS文件和JavaScript文件為網頁文件中的盒子（＜p＞）定義背景圖像。在CSS樣式表文件（css.css）中的定義方法如下：
#box{
background:url(css.gif);
}
由於CSS文件與背景圖像文件都在同一目錄（images文件夾）下，所以可以直接引用，而不用考慮網頁文件的位置。但是，要使用JavaScript文件定義網頁文件中盒子的背景圖像，就必須考慮網頁文件的具體位置。實現的JavaScript代碼如下：
window.onload=function{
document.getElementById("box").style.backgroundImage="url(images/js.gif)";
}
JavaScript文件所引用的背景圖像路徑是以網頁文件的位置為參考進行設置的，而不用考慮JavaScript文件的具體位置，只要網頁文件不動，JavaScript文件所引用的路徑是不會變化的。
總之，對於JavaScript文件與CSS文件，在引用外部圖像文件時，它們的URL設置是不同的，具體區分如下。
❑CSS文件：考慮CSS文件與導入的外部圖像文件之間的位置關係。
❑JavaScript文件：考慮網頁文件與導入的外部圖像文件的位置關係。
另外，當使用CSS和JavaScript同時為頁面中某個元素定義樣式時，JavaScript腳本定義的樣式優先級要大於CSS樣式的優先級。例如，以上面示例為基礎，然後在網頁文件中同時引用CSS文件和JavaScript文件：
＜html＞
＜head＞
＜style type="text/css"＞
#box{
width:200px;
height:200px;
}
＜/style＞
＜script type="text/javascript"src="images/js.js"＞＜/script＞
＜link href="images/css.css"rel="stylesheet"type="text/css"/＞
＜/head＞
＜body＞
＜p＞＜/p＞
＜/body＞
＜/html＞
此時，如果在瀏覽器中預覽，則會顯示JavaScript腳本定義的背景圖像效果。