时间戳

首页 > 解决方案 > 使用 Js 更改特定样式的属性

javascript - 使用 Js 更改特定样式的属性

问题描述

我有一个 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将background-color属性更改为绿色，progress.progressBarStyles::-webkit-progress-value如果值> = 100。这是我开始的。我知道如何执行 if 语句来检查值，但我不确定更改此特定样式的语法。

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

标签： javascripthtmlcss

解决方案

当值大于或等于 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>

推荐阅读