如何调用 range::-webkit-slider-runnable-track？答案

【问题标题】：how to call range::-webkit-slider-runnable-track?如何调用 range::-webkit-slider-runnable-track？
【发布时间】：2016-12-12 09:55:25
【问题描述】：

基本上我需要使用 jquery 或 javascript 调用 .range::-webkit-slider-runnable-track，以便我可以对其背景进行一些更改并对其进行其他实现。

确切地说，我目前正在使用

$('<style>.myrange::-webkit-slider-runnable-track{background:linear-gradient(to right, white'+val+'%, #bbb '+val+'%);}</style>').appendTo('head');

这工作得很好，但问题是我调用.myrange::-webkit-slider-runnable-track 就像几千次一样，每次它附加到我的范围时都会遇到一些性能问题等等。

如果有人告诉我如何使用 $('.myrange::-webkit-slider-runnable-track').css("background", "black"); 之类的东西来做到这一点，我将不胜感激

问题更新：

<input type="range" value="0" min="0" max="100" id="myrange" class="myrange"/>

此range 已连接到一个视频，该视频跟踪视频持续时间并更改轨道颜色直到视频已被观看。

我正在为范围跟踪器着色：

vid.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
   var loadPercentage = loadEndPercentage -      loadStartPercentage;

   val = loadPercentage*100;
   thmpos = $('.vidskb_r').val();
   var style = $("<style>", {type:"text/css"}).appendTo("head");
   style.text('.vidskb_r::-webkit-slider-runnable-track{background:linear-gradient(to right, #ff7e20 '+thmpos+'%, #fff '+thmpos+'%, #fff '+val+'%, #bbb '+val+'%);}');

});

提前致谢：)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

将css 文本附加到单个<style> 元素，用.text() 替换.append()

注意，您不需要在循环或事件处理程序的每次迭代中创建新的<style> 元素。在循环或事件处理程序之外创建 <style> 元素，并使用变量来引用循环或事件处理程序内的单个 <style> 元素。

// create and append `<style>` element to `<head>` once, here
// before attaching `progress` event to `vid`, and outside
// of `progress` event handler
var style = $("<style>", {type:"text/css"}).appendTo("head");

vid.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
   var loadPercentage = loadEndPercentage -      loadStartPercentage;

   val = loadPercentage*100;
   thmpos = $('.vidskb_r').val();

   style.text('.vidskb_r::-webkit-slider-runnable-track{background:linear-gradient(to right, #ff7e20 '+thmpos+'%, #fff '+thmpos+'%, #fff '+val+'%, #bbb '+val+'%);}');

});

【讨论】：

所以它会是这样的：var style = $("<style>").appendTo("head");style.append(".myrange::-webkit-slider-runnable-track{background:linear-gradient(to right, white "+val+"%, #bbb "+val+"%);}"); 如果是这样，那么它仍然一遍又一遍地附加样式，我可以通过检查我的浏览器头部元素看到这一点。
您可以将.text() 替换为.append()
我更新了我的问题，您可以阅读我的问题中的更新！
@akdsfjakls 你有没有用.text() 代替.append()？查看更新后的帖子。
谢谢你，你太棒了，它工作得非常完美。