输入类型范围 - 拇指错误输出答案

【问题标题】：input type range - output on thumb error输入类型范围 - 拇指错误输出
【发布时间】：2016-04-12 17:53:32
【问题描述】：

我的代码突然停止工作，问题是我想将范围值输出到范围的拇指。

这是我的代码：

 <input id="slider1" type="range" min="5000" max="350000" step="1000" value="5000" name="beloeb" oninput="outputUpdate(value)" />

Js：

 function outputUpdate(vol) {
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
}
document.styleSheets[0].addRule('#slider1::-webkit-slider-thumb::before','content: "'+formatNumber(vol)+' DKK";');
}

这是在控制台中使用chrome时的错误：

未捕获的语法错误：无法在“CSSStyleSheet”上执行“addRule”：无法解析规则“#slider1::-webkit-slider-thumb::before { content: "8.000 DKK"; }'。

【问题讨论】：

标签： javascript html css

【解决方案1】：

::-webkit-slider-thumb 是not a standard pseudo selector

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

如果你在 CSS Validator 中检查你的代码，你会得到类似的东西：

::-webkit-slider-thumb is an unknown vendor extended pseudo-element

因此可能是较新版本的浏览器停止支持该属性。

目前还没有一种标准的方式来使用 CSS 实现这一目标。但是有一些不错的工具可以使用 div/span 实现相同的结果，例如 http://refreshless.com/nouislider/

【讨论】：

还有其他方法可以将值添加到范围拇指吗？
@PatrickLarsen 我没有看到任何标准的跨浏览器支持的方式来轻松做到这一点。你可以查看这篇文章css-tricks.com/…，但不是一个很好的支持功能。

【解决方案2】：

如Avraam's response 中所述，::webkit-slider-thumb 样式是非标准的，在任何类型的跨浏览器意义上都不起作用。因此styleSheet.addRule() 函数将无法解析它。

您可以考虑使用 Javascript 创建一个包含您所定位的样式的 <style> 块（如果当前页面中尚不存在该样式，而不是将其直接添加到样式表中）：

<script>
  function outputUpdate(vol) {
    // Create a style block
    var style = document.createElement('style');
    // Set an ID for style and type
    style.id = 'slider-rule';
    style.type = 'text/css';
    // If the style doesn't exist in the DOM...
    if(!document.getElementById(style.id)){
      // Resolve the head section of the document
      var head = document.head || document.getElementsByTagName('head')[0];
      // Style content
      var content = '#slider1::-webkit-slider-thumb::before{ content: "'+formatNumber(vol)+' DKK";}';
      if (style.styleSheet){
          style.styleSheet.cssText = content;
      } else {
          style.appendChild(document.createTextNode(content));
      }
      // Append this tag to the <head> section
      head.appendChild(style);
    }
  }

  function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
  }
</script>

这显然不能解决跨浏览器的问题，但如果它不存在，它会将正确的<style> 块添加到 DOM：

【讨论】：