时间戳

首页 > 解决方案 > 如何根据条件更改进度条的颜色

javascript - 如何根据条件更改进度条的颜色

问题描述

我在-webkit-progress-value根据条件更改或更新背景颜色时遇到问题。我正在尝试使用：

document.querySelectorAll('progress ::-webkit-progress-value').style.setProperty('background', 'blue');

并使用 jquery ：

$('progress ::-webkit-progress-value').css('background', 'blue');

但进度条的颜色仍然是默认颜色（灰色）。

有什么解决方案可以在以下条件下更新颜色？

  1. 青铜：男孩（橙红色）和女孩（紫色）
  2. 银色：男孩（黄色）和女孩（绿色）
  3. 金色：男孩（红色）和女孩（蓝色）

 function check() {

   var classTrophy = "Gold";

   if (classTrophy == "Bronze") {
     console.log("Bronze");
     document.getElementById("boy").style.background = "orangered";
     document.getElementById("girl").style.background = "purple";

   } else if (classTrophy == "Silver") {
     console.log("Silver");
     document.getElementById("boy").style.background = "yellow";
     document.getElementById("girl").style.background = "green";

   } else if (classTrophy == "Gold") {
     console.log("Gold");
     document.getElementById("boy").style.background = "red";
     document.getElementById("girl").style.background = "blue";
   }
 }
progress {
  width: 100%;
  -webkit-appearance: none;
  margin-left: 8px;
  height: 8px;
}

progress::-webkit-progress-value {
  -webkit-appearance: none;
  background: grey;
  white-space: pre;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
}

progress::-webkit-progress-bar {
  -webkit-appearance: none;
  white-space: pre;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="check()">
<main>
 <div class="form-group">
   <label for="" class="mb-0" id="boyPoint" style="font-size:12px;color:black">Boy</label>
   <div id="boyBar" class="input-group">
     <progress id="boy" value="50" max="100"> </progress>
   </div>
 </div>
 <br><br>
 <div class="form-group">
   <label for="" class="mb-0" id="girlPoint" style="font-size:12px;color:black">Girl</label>
   <div id="girlBar" class="input-group">
     <progress id="girl" value="80" max="100"> </progress>
   </div>
 </div>
  </div>
</main>
</body>
</html>

标签： javascripthtmlcss

解决方案

尝试这个

 function check() {

   var classTrophy = "Gold";

   if (classTrophy == "Bronze") {
     console.log("Bronze");
     document.getElementById("boy").style.background = "orangered";
     document.getElementById("girl").style.background = "purple";

   } else if (classTrophy == "Silver") {
     console.log("Silver");
     document.getElementById("boy").classList.add("progress-yellow");
     document.getElementById("girl").classList.add("progress-green");

   } else if (classTrophy == "Gold") {
     console.log("Gold");
     document.getElementById("boy").classList.add("progress-red");
     document.getElementById("girl").classList.add("progress-blue");
   }
 }
progress {
  width: 100%;
  -webkit-appearance: none;
  margin-left: 8px;
  height: 8px;
}

progress::-webkit-progress-value {
  -webkit-appearance: none;
  background: grey;
  white-space: pre;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
}

progress::-webkit-progress-bar {
  -webkit-appearance: none;
  white-space: pre;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
}
.progress-yellow::-webkit-progress-bar{
   background: yellow;
 }
 .progress-red::-webkit-progress-bar{
   background: red;
 }
 .progress-blue::-webkit-progress-bar{
   background: blue;
 }
 .progress-green::-webkit-progress-bar{
   background: green;
 }
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="check()">
<main>
 <div class="form-group">
   <label for="" class="mb-0" id="boyPoint" style="font-size:12px;color:black">Boy</label>
   <div id="boyBar" class="input-group">
     <progress id="boy" value="50" max="100"> </progress>
   </div>
 </div>
 <br><br>
 <div class="form-group">
   <label for="" class="mb-0" id="girlPoint" style="font-size:12px;color:black">Girl</label>
   <div id="girlBar" class="input-group">
     <progress id="girl" value="80" max="100"> </progress>
   </div>
 </div>
  </div>
</main>
</body>
</html>

推荐阅读