如何将数据属性值用于线性渐变背景

【问题标题】：How to use data-attr value for linear-gradient background如何将数据属性值用于线性渐变背景
【发布时间】：2018-09-30 20:50:04
【问题描述】：

给定这个输入

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}

&lt;input class="prettyRange" type="range" name="capability" data-percent="100%"&gt;

但如果我尝试通过 attr(data-percent) 设置 % 则不起作用。

background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)

如何使用项目的 data-percent 属性？

PS：我想使用data-property，因为我需要用JS更新这个值，我们不能用JS选择伪元素。

【问题讨论】：

此功能尚不可用，甚至在下一版本的 CSS 中存在风险drafts.csswg.org/css-values/#status

标签： html css background gradient custom-data-attribute

【解决方案1】：

另一种方法是使用CSS variable，您可以使用 JS 轻松调整：

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right,#fff 0%,green var(--p,50%), #fff 0%);
}

<input class="prettyRange" type="range" name="capability" style="--p:80%">
<br>
<input class="prettyRange" type="range" name="capability" style="--p:100%">
<br>
<input class="prettyRange" type="range" name="capability" >

使用JS改变值：

document.querySelector('.prettyRange').addEventListener('input',function(e) {
  e.target.style.setProperty('--p', e.target.value*10+'%');
})

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green var(--p, 50%), #fff 0%);
}

&lt;input class="prettyRange" min='1' max='10' type="range" name="capability"&gt;

【讨论】：