无法更改我的javascript以使其适合css和javascript

以下代码根据我从某个获取的数字更改圆的颜色：

let box=document.getElementsByClassNamecenterbox； 对于let i=0；i.长度；i++{ 设box=box.itemi； 让content=box.getElementsByTagNamep[0].innerHTML； 设number=Numbercontent； 如果编号=1&&number<5{ box.style.backgroundColor=黄色； }否则，如果编号>=5{ box.style.backgroundColor=绿色； } } .中心盒{ 对齐内容：中间对齐； 宽度：10px； 高度：10px； 边界半径：50%； } 普斯泰尔先生{ 边缘顶部：10px； 左边距：25px； } .集装箱宽度{ 宽度：100%； 高度：自动； } 库存量|

5

---

您可以在CSS中使用伪元素来解决这个问题。下面是CSS代码的样子

.centerbox::before {
  content: "";
  display: inline-block;
  width:10px; 
  height:10px; 
  border-radius:50%;
 }

 .green::before {
   background-color: green;
 }

 .red::before {
   background-color: red;
 }

 .yellow::before {
   background-color: yellow;
 }

.pstyle {
  margin-top:10px;
  margin-left:25px;
}

.widthcontainer{
  width: 100%;
  height:auto;
}

然后将类添加到元素中，JS代码如下所示：

let boxes = document.getElementsByClassName("centerbox")
for(let i = 0;i<boxes.length;i++){
  let box = boxes.item(i)
  let content = box.getElementsByTagName("p")[0].innerHTML
  let number = Number(content)
  if(number <= 0) {
    box.classList.add("red");
  }
  else
  if(number >= 1 && number <5){
   box.classList.add("yellow");
  }

  else
  if(number >=5){
   box.classList.add("green");
  }

}

HTML保持不变：

<div class="widthcontainer">
  <div class="centerbox">
    <span class="">Stock amout |</span> <p class="pstyle">10</p>
 </div>  
</div>

---

利用psuedo类，：before:post感谢您的快速回答！-你能再具体一点吗？我已经很久没有真正编码了，所以我非常生疏！谢谢！这似乎奏效了！你是个救命的朋友！