CODEWITHSUNDEEP
javascripthtmlcss
itsMeMoriarty
itsMeMoriarty

Reputation: 145

Changing Attribute of Specific Style Using Js

I have a div written as follows:

<div class="progressBarDiv">
   <progress id="pBar" class="progressBarStyles" value='30' max="100"></progress>
   <!-- Some other code --> 
</div>

Here are the styles:

progress.progressBarStyles {
    border-radius: 50px; 
    width: 100%;
    height: 15px;
    margin: 0;
}
progress.progressBarStyles::-webkit-progress-bar {
    background-color: #f7f7f7;
    border: 1px solid #dedcdc;
    border-radius: 50px;
}
progress.progressBarStyles::-webkit-progress-value {
    background-color: #1a73e8;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

What I'm trying to do is change the background-color attribute to green in the progress.progressBarStyles::-webkit-progress-value if the value is >= 100 using js. Here is what I have started with. I know how to do the if statements to check the value but I'm not sure about the syntax to change this specific style.

var progBar = document.getElementByID("pBar");
// Code to change the background color

Upvotes: 0

Views: 51

Answers (1)

hgb123
hgb123

Reputation: 14871

You could add a new style for progress bar value for the case when value is greater than or equal to 100 and then toggle that style

var progBar = document.getElementById("pBar");

if (progBar.value >= 100) {
  progBar.classList.toggle('progressBarGte100')
}
progress.progressBarStyles {
  border-radius: 50px;
  width: 100%;
  height: 15px;
  margin: 0;
}

progress.progressBarStyles::-webkit-progress-bar {
  background-color: #f7f7f7;
  border: 1px solid #dedcdc;
  border-radius: 50px;
}

progress.progressBarStyles::-webkit-progress-value {
  background-color: #1a73e8;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

progress.progressBarGte100::-webkit-progress-value {
  background-color: green;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
<div class="progressBarDiv">
  <progress id="pBar" class="progressBarStyles" value='100' max="100"></progress>
  <!-- Some other code -->
</div>

Upvotes: 2

Related Questions