使用Js更改特定样式的属性
使用Js更改特定样式的属性
提问于 2020-09-07 17: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-07 17: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
复制相关文章
相似问题
BeautifulSoup，更改特定样式属性
使用JS更改样式
JS事件帮助-更改样式属性时
js对象-使用单个方法更改多个特定属性
使用JS更改内联样式与更改外部样式表样式
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
