使用Js更改特定样式的属性
使用Js更改特定样式的属性
提问于 2020-09-08 01:09:38
我有一个div，代码如下：
<div class="progressBarDiv">
<progress id="pBar" class="progressBarStyles" value='30' max="100"></progress>
<!-- Some other code -->
</div>以下是样式：
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;
}我尝试做的是使用js将progress.progressBarStyles::-webkit-progress-value中的background-color属性更改为绿色(如果值为>= 100 )。这是我开始做的事情。我知道如何执行if语句来检查值，但我不确定如何使用语法来更改此特定样式。
var progBar = document.getElementByID("pBar");
// Code to change the background color回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-08 01:25:31
您可以为值大于或等于100的情况添加进度条值的新样式，然后切换该样式
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63781692
复制相关文章
相似问题
腾讯云开发者
