虽然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脚本定义的背景图像效果。