使用JavaScript编辑样式元素时闪烁

Question

基本上，当我编辑样式元素的内部HTML时，我的整个DOM都会闪烁。无论如何，我可以解决这个问题吗？或者更好的是，我有什么方法可以编辑输入范围的轨道颜色而无需直接编辑样式元素。

这是闪烁的意思：https://i.imgur.com/C67Ge0H.gifv

function backgroundChange(src) {
  var img = new Image();
  img.onload = function () {
    var colorThief = new ColorThief();
    var rgb = colorThief.getColor(img);
    document.getElementById("background").style.cssText += `background-image: url(${this.src})`;
    return changeHoverColor(rgb);
  };
  img.crossOrigin = 'Anonymous';
  img.src = 'http://cors-anywhere.herokuapp.com/' + src; // Bypass CORS restriction to avoid tainted canvas.
}

function changeHoverColor(...rgb) {
  return document.getElementsByTagName('style')[0].innerHTML = `
    input[type=range]#time:hover::-webkit-slider-runnable-track {
      background: rgb(${rgb});
    }
  `;
}