Question

这是HTML输入范围

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

我可以使用此CSS

将Range Track的背景颜色更改为“#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中，背景颜色属性写为＆＃34; background-color：color_hex_value＆＃34;。这就是你的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这两个来源。

Answer 2

您现在可以（2020年）通过使用CSS变量来做到这一点。

CSS

#golden_range::-webkit-slider-runnable-track {
  background: var(--track-background, #ddd);
}

#golden_range::-moz-range-track {
  background: var(--track-background, #ddd);
}

Javascript

document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');

（应将轨道背景更改为红色）

我正在Player Chrome中执行此操作，以设置媒体播放器进度条的样式，并使用轨道上的背景渐变来显示进度。

Answer 3

坏消息。我还没有找到合适的方法...但我发现了一种肮脏的方式; 在页面正文中插入样式标记。当然，此标记的内容是使用javascript：

生成的

var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
 var mod= "::-webkit-slider-runnable-track";

var txt= "#id_range" + mod + " {\n";
txt+= "    background-color: rgb(100,100,100)\n";
txt+= "}\n";

estilo.text(txt);

$("#some_id").remove();
$("div#other_id").append(estilo);

它的丑陋，缓慢和糟糕，但它确实有效。

Answer 4

将以下代码添加到您的文件中

<强> CSS：

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

<强> jQuery的：

$(document).on('input', '#golden_range', function() {
       var rangeValue = $(this).val(); 
       var changeRange = 20;
        if(currrentRange > changeRange){
            $("#golden_range").addClass("change");
        }
        });

注意： 请检查 changeRange 值并根据需要进行更改。

如何使用Jquery / Javascript更改Track for RANGE输入的颜色？

4 个答案:

CSS

Javascript