Question

这是我的HTML代码

<input type="range" name="que1" min="0" max="100" value="0" class="slider" id="myRange">

它的javascript代码是

var slider = document.getElementById('myRange')

function onChange(event) {
  var x = event.target.value

  if (x == 0) {
    slider.className = ''
  } else if (x > 30 && x < 60) {
    slider.className = 'MyClass-1'
  } else if (x == 100) {
    slider.className = 'MyClass-2'
  }
}

slider.addEventListener('input', onChange)

当我拖动滑块时，值会更改，但是类没有根据值添加，它在chrome中完美运行，但在Internet Explorer 11中没有。

任何解决方案都可以在ie11中实现？

Answer 1

根据caniuse（参见＆＃34;已知问题＆＃34;），IE10和IE11在鼠标操作上触发change，而不是input。因此，您需要处理change以及input。

slider.addEventListener('input', onChange)
slider.addEventListener('change', onChange) // For IE11

输入范围滑块的Javascript代码无法在Internet Explorer 11中使用

1 个答案: