javascript - 从 javascript 动态覆盖 CSS

Question

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

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

我的问题与移动 slider 的宽度有关(仅对象的移动元素)。为了让自己更清楚，我上传了迄今为止创建的 slider 的屏幕截图，其中我圈出了我想要更改其宽度的元素: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 即可。

更新目前，仅更改 slider slider 的最佳方法是使用 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);
}