Edit a css attribute "webkit-progress-bar" with javascript?

Question

Edit a css attribute "webkit-progress-bar" with javascript?

Navigation

#1 by (1 votes)

0

Hi, I want to know how to edit the "-webkit-progress-bar" component, which I have declared as follows:

.form progress::-webkit-progress-value {
  background: #1EDC82;
}

And I have it in this part of the code:

<div class="progress">
<p>html 5</p>
<label for="html"></label>
<progress max="100" value="0" id="html"></progress>
</div>

And I want to know how to edit the webkit attribute with javascript, I tried this:

document.getElementById("html").style.webkitBackground = "#FFF";

Thanks for your answers

javascript css

asked by Andy Samuel 30.12.2017 в 16:48

source

1 answer

Delete BD record with PHP Rails, Plugin or gem?

score 1 · Accepted Answer

I already solved it, to whom I can serve I leave what I did. First I added a class to the progress

<progress max="100" value="0" id="html" class="prim"></progress>

and I edited the css so that the first progress is of the prim class

.form progress.prim::-webkit-progress-value {
  background: #1EDC82;
}

and I also created another css similar to the previous one but changing the background to the color I want to be placed

.form progress.sec::-webkit-progress-value {
      background: red;
    }

And with js what I do is change the class "prim" to the class "sec" by removing the first class.

$('#html').addClass("sec").removeClass("prim");

I hope it serves someone. If you know another way I will gladly read your comments. It should be noted that, having several progress is better to change the class so that the other progress maintain their color.