javascript - 如何使用 Jquery/Javascript 更改 RANGE Input 的轨道颜色？

Question

这是 HTML 输入范围

<input id="golden_range" type="range">

我可以使用此 CSS 将范围轨道的背景颜色更改为“#DDD”

#golden_range::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #DDD;
    border: none;
    border-radius: 3px;
}
#golden_range::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #DDD;
    border: none;
    border-radius: 3px;
}

但我无法使用 Jquery/Javascript 更改背景颜色。请在这件事上给予我帮助。这是我正在尝试的代码。

$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');

Answer 1

根据您问题中的代码，我发现您的语法有误。在 css 中，背景颜色属性写为“背景颜色:color_hex_value”。这是你的 css 代码应该是这样的:

#golden_range::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background-color: #DDD;
  border: none;
  border-radius: 3px;
}
  #golden_range::-moz-range-track {
  width: 300px;
  height: 5px;
  background-color: #DDD;
  border: none;
  border-radius: 3px;
}

这是 jquery 的代码:

$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");

如果您仍有疑问，请查看 css background-color properties 的这两个来源和 Jquery css() method .