如何使用线性渐变背景的数据属性值
How to use data-attr value for linear-gradient background
鉴于此输入
.prettyRange {
-webkit-appereance: none;
}
.prettyRange::-webkit-slider-runnable-track {
background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}
<input class="prettyRange" type="range" name="capability" data-percent="100%">
但是如果我试图通过 attr(data-percent) 设置 % 它不起作用。
background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)
如何使用项目的数据百分比属性?
PS: 我想用数据-属性因为我需要用JS更新这个值,我们不能用JSselect伪元素
另一种方法是使用 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%);
}
<input class="prettyRange" min='1' max='10' type="range" name="capability">
鉴于此输入
.prettyRange {
-webkit-appereance: none;
}
.prettyRange::-webkit-slider-runnable-track {
background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}
<input class="prettyRange" type="range" name="capability" data-percent="100%">
但是如果我试图通过 attr(data-percent) 设置 % 它不起作用。
background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)
如何使用项目的数据百分比属性?
PS: 我想用数据-属性因为我需要用JS更新这个值,我们不能用JSselect伪元素
另一种方法是使用 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%);
}
<input class="prettyRange" min='1' max='10' type="range" name="capability">