如何调用范围:: - webkit-slider-runnable-track？ [英] how to call range::-webkit-slider-runnable-track?

问题描述

基本上我需要使用jquery或javascript调用 .range :: - webkit-slider-runnable-track ，这样我就可以对它的背景进行一些更改，并执行

 
 
 
 $（'< style> .myrange ::  -  webkit-slider-runnable-track {background：linear-gradient（to right，white'+ val +'％，#bbb'+ val +'％）;}<风格> '）appendTo（' 头）; 
  
这很好，但问题是我打电话给 .myrange ::  -  webkit-slider-runnable-track 喜欢几次，每次它追加到我的范围会遇到一些性能问题等。
 
 
 
如果有人告诉我如何用 $（'。myrange ::  -  webkit-slider-runnable-track'）。css（背景，黑色）;  
 
 
 
问题更新： 
 
 
 < input type =rangevalue =0min =0max =100id =myrangeclass =myrange/> 
  
这个范围已连接到一个视频跟踪视频的持续时间，并改变轨道的颜色，直到视频已被观看。
 
 
 
为了做范围跟踪器的着色，这是我我在做： 
 
 
  vid.addEventListener（'progress'，function（）{
 var range = 0; $ b $（bf.start（range）< = time&& time< = 
 $ this.buffered; 
 var time = this.currentTime; 
 
） bf.end（range）））{
 range + = 1; 
} 
 var loadStartPercentage = bf.start（range）/ this.duration; 
 var loadEndPercentage = bf。 end（range）/ this.duration; 
 var loadPercentage = loadEndPercentage  -  loadStartPercentage; 
 $ b $ val = loadPercentage * 100; 
 thmpos = $（'。vidskb_r'）。val ）; 
 var style = $（< style>，{type：text / css}）。appendTo（head）; 
 style.text（'。vidskb_r ::  - WebKit的滑块运行nable-track {background：linear-gradient（to right，＃ff7e20'+ thmpos +'％，#fff'+ thmpos +'％，#fff'+ val +'％，#bbb'+ val +'％）;}'）; 
 
}）; 
  
预先致谢：）
 
解决方案将 css 文本附加到一个< style> 元素，替换 .text（） for  .append（） 
 
 
 
您无需在循环或事件处理程序的每次迭代中创建新的< style> 元素。在循环或事件处理程序之外创建< style> 元素，并使用变量引用单个< style> 元素在循环或事件处理程序中。
  //创建并追加`< style>元素到`< head> `一次，这里
 //在将`progress`事件附加到`vid`之前，以及
 //`progress`事件处理程序之外
 var style = $（< style> ，{type：text / css}）。appendTo（head）; 
 
 vid.addEventListener（'progress'，function（）{
 var range = 0; 
 var bf = this.buffered; 
 var time = this.currentTime ;（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 +'％） ;}'）; 
 
}）; 
  
 
Basically I need to call .range::-webkit-slider-runnable-track using either jquery or javascript so I can make some changes over to it's background and do other implementations over it.

To be precise I am currently using 
$('<style>.myrange::-webkit-slider-runnable-track{background:linear-gradient(to right, white'+val+'%, #bbb '+val+'%);}</style>').appendTo('head');
This works pretty much fine, but the problem is that I'm calling .myrange::-webkit-slider-runnable-track like couple of thousands of times which every time it appends to head my range gets to face some performance issue and so.

I would really appreciate if some one tell how to do this with something like $('.myrange::-webkit-slider-runnable-track').css("background", "black");

Question Update:
<input type="range" value="0" min="0" max="100" id="myrange" class="myrange"/>
This range has connected to a video which track the video duration and changes the color of the track up to the point that the video has been watched.

And to do the coloring of the range tracker this is what I am doing:
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+'%);}');

});
Thanks in advance:)
解决方案
Append css text to a single <style> element, substitute .text() for .append()

Note, you do not need to create a new <style> element at each iteration of a loop or event handler. Create <style> element once outside of loop or event handler and use a variable to reference the single <style> element within loop or event handler.
// 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+'%);}');

});


                        
这篇关于如何调用范围::  -  webkit-slider-runnable-track？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！