如何更改使用Jquery/Javascript的RANGE輸入的Track的顏色？

Here`s的HTML輸入範圍如何更改使用Jquery/Javascript的RANGE輸入的Track的顏色？

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

來源

2015-03-31 Dynamic Remo

反正更好地使用班級...... – CBroe 2015-03-31 16:31:25

當你想改變顏色時是否有任何特定事件？把它放在'$（document）.ready'函數中 – Sukanya 2015-03-31 16:34:47

可能出現[用JavaScript改變CSS僞元素樣式]的副本（http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via -javascript） – 2015-03-31 16:38:29

根據您的問題中的代碼，我看到您的語法錯誤。在CSS中，背景顏色屬性寫爲「background-color：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。

來源

2015-03-31 16:28:13

是的，我最初嘗試過，但它也沒有工作。 – 2015-03-31 16:37:59

因此，如已經建議，或嘗試看看這裏：http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript/12207551#answer-8051488 – 2015-03-31 17:37:09

壞消息。我沒有找到一個合適的方式來做...但我發現了一個骯髒的方式; 在頁面的主體中插入樣式標籤。當然，這個標籤的內容是用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);

它的醜陋，緩慢和壞，但它的工作原理。

來源

2015-12-10 16:16:49

添加以下代碼到你的文件

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

注：請檢查更改範圍值和更改，只要你想。

來源

2017-08-09 09:17:37 Swanand

如何更改使用Jquery/Javascript的RANGE輸入的Track的顏色？

回答

相關問題