javascript - 无法更改我的 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>