javascript - 将范围标记的值设置为 :before content

Question

在此示例中，a 的值 <range>标记被写入 <output>标签:

http://jsfiddle.net/2GhQX/

可以<range>的值吗？标记写入 CSS :before相同的值 <range>标签？

input[type="range"]:before {
    content: <insert value here>
}

如有必要，可以使用 JavaScript。

Answer 1

您需要使用 JavaScript 将值写入 input 标记的自定义属性，然后使用 CSS attr()函数获取该属性的值并填充伪元素的内容。

document.getElementById("range").addEventListener("input",function(){
  this.dataset.value=parseInt(this.value.trim());
},0);

*{color:#000;font-family:arial,sans serif;}
input::before{
  content:attr(data-value);
}

<input data-value="0" id="range" type="range" value="0">

另一种具有更好 future 证明的选择是使用 output带有类似 JavaScript 的元素，如下所示:

document.getElementById("input").addEventListener("input",function(){
  document.getElementById("output").value=this.value.trim();
},0);

*{color:#000;font-family:arial,sans serif;}
output{float:left;}

<input data-value="0" id="input" type="range" value="0">
<output for="input" id="output">0</output>