无法更改我的 javascript 以使其适合！ - CSS和JavaScript

Question

以下代码根据我从某个<p> 获得的数字更改圆圈的颜色：

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.style.backgroundColor = "red";
    } else if(number >= 1 && number < 5) {
        box.style.backgroundColor = "yellow";
    } else if(number >= 5) {
        box.style.backgroundColor = "green";
    }
}

.centerbox {
    align-content: middle; 
    width:10px; 
    height:10px; 
    border-radius:50%;
}

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

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

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

我无法弄清楚如何设置圆本身的宽度（.centerbox），因为 css 定义了圆的宽度，其中包含 <p>。

我想知道是否有办法自己设置圆圈的样式，然后将<span> 和<p> 中的文本放入其中？

它应该用于判断某种产品是否有货。

提前致谢！ 安德烈亚斯

Answer 1

您可以在 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>