从javascript动态覆盖CSS

Question

我正在尝试根据此处给出的示例创建一个水平滚动条：

https://www.w3schools.com/howto/howto_js_rangeslider.asp

我的问题与移动滑块的宽度有关（仅对象的移动元素）。为了让自己更清楚，我正在上传我迄今为止创建的滑块的屏幕截图，其中我圈出了我正在尝试更改的元素的宽度：Slider

有没有办法覆盖 CSS 属性并根据输入数据动态更改宽度？

到目前为止，根据我发现的类似问题，我尝试做的是使用 webkit 更改宽度。不幸的是，它不起作用：

 elem.before($('<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'));
 slider = _.find($('[id="mySlider"]'));
 slider = $(slider);
 document.getElementById('mySlider').style.webkitTransform = '{width: 250 px}';

您还可以在下面找到一张带有我想动态更改的css属性的图片：CSS File

任何建议都会非常有帮助。提前谢谢！

Answer 1

试试这个：

document.body.innerHTML = '<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'

document.querySelector('#mySlider').style.width = '250px';

setTimeout(() => {
  document.querySelector('#mySlider').style.width = '100px';
},3000)

你做的比需要的多得多。只需在您的元素上设置style.width。

更新如今，仅更改滑块拇指的最佳方法是使用 CSS 变量：

document.body.innerHTML = '<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'

document.querySelector('#mySlider').style.setProperty('--thumb-width', '55px');

setTimeout(() => {
  document.querySelector('#mySlider').style.setProperty('--thumb-width', '155px');
},3000)

#mySlider {
  -webkit-appearance: none;
  appearance: none;
  background: #d3d3d3;
  width: 100%;
  height: 25px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#mySlider:hover {
  opacity: 1;
}

#mySlider::-webkit-slider-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}



#mySlider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}

#mySlider::-ms-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}