Question

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

这是我的代码：

 <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时出现错误：

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

Answer 1

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

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

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

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

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

现在还没有一种标准的方法可以用CSS实现。但是有一些很好的工具可以使用像http://refreshless.com/nouislider/

这样的div / span来实现相同的结果

Answer 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>

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

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

2 个答案: