通过javascript文件加载css，不起作用

我正在尝试使用JS文件根据滚动位置加载css。我有一个带有三个嵌套div的header div，这个JS正在修改它。这是我的

JS:

资料来源：

<div id="title">
<div id="textBox">
</div>
<div class="rateBox">
</div>
<div id="quoteBox">
</div>
</div>

---

但是当我尝试添加$（'#rateBox'）.css（“背景”，“url（'../img/rating/rating3.png'）”）如果是3-7，则它不会起任何作用。事实上，它似乎撤销了我设置的默认白色背景色。到目前为止，我尽了我所能来解决这个问题，但没有一个组合起作用。我做错了什么？

所以我找到了这个问题的答案Boldewyn您可能已经找到了，因为将我的文件路径从../img/rating/rating5.png更改为rating/rating5.png很有效，很好。我还将站点文件夹中的rating文件夹从img文件夹移到了index.html文件级别

---

@Mike‘Pomax’Kamermans我试图理解你的循环，但没有更详细的代码和更多的解释，说明循环如何修复雷区，使内容更易于管理，现在我无法理解你的文章。在我看来，数组文本很容易更新，它们插入的位置永远不会改变，如果评级改变，你所要做的就是将文件名从ratingX.png改为你想要的数字。我使用的命名约定解决了这个问题

URL是相对于HTML文件而不是JS/CSS文件的吗？这很关键。您使用的是速记CSS语法，它将用速记（透明）的默认值覆盖您的背景色属性。尝试只使用background image:url（）来代替。如果给不同的类提供一个具有不同样式的常规css文件，然后只根据scroll而不是所有样式更改该类，这不是更简单吗？这将避免通过JavaScript改变背景图像的奇怪现象。好吧，所以我甚至不能让它适应我需要做的事情，我想，没有什么是有效的。您的代码需要循环<代码>用于（变量i=0，el；i

#title { 
width: 100%; 
background: black; 
height: 85px;   
position: fixed;
margin-top: 0px;
padding-top: 10px;
font-size: 30px; 
color: white;
box-shadow: 0px 10px 5px #888888;
z-index: 1001; 
display: none;
} 

#textBox {
width: 250px;
height: 40px;
margin: 0 auto;
margin-left: 25px;
padding-top: inherit;
float: left;
}

#quoteBox {
width: 50%;
 height: 40px;
margin: 0 auto;
padding-top: inherit;
}

.rateBox {
width: 75px;
height: 75px;
float: right;
margin: 0 auto;
margin-right: 25px;
border: green 1px solid;
background-image: url(../img/rating/rating5.png);
background-repeat: no-repeat;
}

.5 {
background-image: url(../img/rating/rating5.png);
background-repeat: no-repeat;
}

.4.5 {
background-image: url(../img/rating/rating4.5.png);
background-repeat: no-repeat;
}

.4 {
background-image: url(../img/rating/rating4.png);
background-repeat: no-repeat;
}

.3.5 {
background-image: url(../img/rating/rating3.5.png);
background-repeat: no-repeat;
}

.3 {
background-image: url(../img/rating/rating3.png);
background-repeat: no-repeat;
}

<div id="title">
<div id="textBox">
</div>
<div class="rateBox">
</div>
<div id="quoteBox">
</div>
</div>