Блог

Главная - Вопросы по программированию - Как изменить цвет индикатора выполнения с помощью условий

Как изменить цвет индикатора выполнения с помощью условий

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня возникла проблема с изменением или обновлением цвета фона в -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>

Ответ №1:

Попробуйте это

  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>

Комментарии:

1. Имейте в виду, что вам нужно добавить -moz-progress-bar/value для firefox