如何根据条件修改进度条-webkit-progress-value背景色？现有方案失效

嘿，我懂你为啥之前的方法不管用——::-webkit-progress-value这种伪元素根本不是DOM里的实际节点，JS没法直接选中它们修改样式。不过别慌，有两个简单的办法能实现你要的按等级切换进度条颜色的需求，我给你详细说说：

方案1：使用CSS自定义属性（推荐，灵活度高） #

我们可以给progress元素定义一个CSS变量，让伪元素的背景色继承这个变量，之后用JS修改元素的变量值就行，完美绕开伪元素无法直接操作的问题。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        progress {
            width: 100%;
            -webkit-appearance: none;
            margin-left: 8px;
            height: 8px;
            /* 定义进度条颜色变量，默认灰色 */
            --progress-color: grey;
        }
        progress::-webkit-progress-value {
            -webkit-appearance: none;
            /* 用变量作为伪元素的背景色 */
            background: var(--progress-color);
            white-space: pre;
            border-radius: 2px;
            box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
        }
        progress::-webkit-progress-bar {
            -webkit-appearance: none;
            white-space: pre;
            background: #ffffff;
            border-radius: 2px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
        }
    </style>
</head>
<body onload="check()">
<main>
    <div class="form-group">
        <label for="" class="mb-0" id="boyPoint" style="font-size:12px;color:black">Boy</label>
        <div id="boyBar" class="input-group">
            <progress id="boy" value="50" max="100"></progress>
        </div>
    </div>
    <br><br>
    <div class="form-group">
        <label for="" class="mb-0" id="girlPoint" style="font-size:12px;color:black">Girl</label>
        <div id="girlBar" class="input-group">
            <progress id="girl" value="80" max="100"></progress>
        </div>
    </div>
</main>
<script>
function check() {
    var classTrophy = "Gold";
    const boyProgress = document.getElementById("boy");
    const girlProgress = document.getElementById("girl");
    
    if (classTrophy == "Bronze") {
        console.log("Bronze");
        boyProgress.style.setProperty('--progress-color', 'orangered');
        girlProgress.style.setProperty('--progress-color', 'purple');
    } else if (classTrophy == "Silver") {
        console.log("Silver");
        boyProgress.style.setProperty('--progress-color', 'yellow');
        girlProgress.style.setProperty('--progress-color', 'green');
    } else if (classTrophy == "Gold") {
        console.log("Gold");
        boyProgress.style.setProperty('--progress-color', 'red');
        girlProgress.style.setProperty('--progress-color', 'blue');
    }
}
</script>
</body>
</html>

方案2：动态添加CSS类（类管理更清晰） #

如果你更喜欢用类来组织样式，可以提前给不同等级定义好对应的CSS类，然后JS根据等级给progress元素添加/移除类。

核心修改部分：

1. 添加等级对应的CSS类：

/* 青铜等级样式 */
progress.boy-bronze::-webkit-progress-value { background: orangered; }
progress.girl-bronze::-webkit-progress-value { background: purple; }

/* 白银等级样式 */
progress.boy-silver::-webkit-progress-value { background: yellow; }
progress.girl-silver::-webkit-progress-value { background: green; }

/* 黄金等级样式 */
progress.boy-gold::-webkit-progress-value { background: red; }
progress.girl-gold::-webkit-progress-value { background: blue; }

2. 修改JS函数：

function check() {
    var classTrophy = "Gold";
    const boyProgress = document.getElementById("boy");
    const girlProgress = document.getElementById("girl");
    
    // 先清除所有旧的等级类，避免样式冲突
    boyProgress.classList.remove('boy-bronze', 'boy-silver', 'boy-gold');
    girlProgress.classList.remove('girl-bronze', 'girl-silver', 'girl-gold');
    
    if (classTrophy == "Bronze") {
        console.log("Bronze");
        boyProgress.classList.add('boy-bronze');
        girlProgress.classList.add('girl-bronze');
    } else if (classTrophy == "Silver") {
        console.log("Silver");
        boyProgress.classList.add('boy-silver');
        girlProgress.classList.add('girl-silver');
    } else if (classTrophy == "Gold") {
        console.log("Gold");
        boyProgress.classList.add('boy-gold');
        girlProgress.classList.add('girl-gold');
    }
}

两种方法都能完美实现你的需求，选哪种看你自己的代码习惯就行~

内容的提问来源于stack exchange，提问作者Fajar Syairillah