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);
}

从javascript动态覆盖CSS

1 个答案: