HTML 范围输入不更新其值答案

【问题标题】：HTML range input doesn't update its valueHTML 范围输入不更新其值
【发布时间】：2017-02-25 20:04:41
【问题描述】：

我在标记中创建了一个范围输入，并将其值设置为 0，如下所示：

<input type="range" min="0" max="100" step="10" value="0">

我想根据它的当前值来设置它的样式。假设如果它的值为“10”，我想给它一个 50px 的 margin-top。我编写了以下简单的 CSS 规则：

[type="range"][value="10"] {
    margin-top: 50px;
}

当将范围输入滑动到 10 时，人们期望规则会触发，但事实并非如此。然而，当在标记中将输入值设置为“10”时，它会触发。

我在这里遗漏了什么吗？是否真的没有办法根据用户动态更改的值设置范围输入的样式，仅使用 CSS？

【问题讨论】：

标签： html css

【解决方案1】：

输入的值和值属性是两个不同的东西。 value 属性表示 HTML 中指定的元素的初始值。 CSS 只能针对该属性，不幸的是不能针对元素的实际值。但是，您可以使用 javascript 在更改时读取当前值，然后使用输入的值更新 value 属性，然后您可以在 CSS 中定位更新后的属性。

document.getElementById('input').addEventListener('change',function() {
  this.setAttribute('value',this.value);
});

input[type="range"][value="10"] {
  margin-top: 10px;
}
input[type="range"][value="20"] {
  margin-top: 20px;
}

&lt;input id="input" type="range" min="0" max="100" step="10" value="0"&gt;

【讨论】：