Question

我在这里我的简单滑块，我理论上将用于根据滑块位置控制步进电机的运动。我想把它托管的网站看起来很专业，所以我花了很长时间试图弄清楚如何在滚动时更改按钮颜色（这是因为电机正在控制我的锅炉温度，所以我可以直观地表示temp会很好）但我的问题是改变css值。我知道使用document.getElementById("myRange")获取.slider css但我需要定位.slider::-webkit-slider-thumb部分，因为background是按钮本身的颜色。事实证明，我很难找到一种方法来引用它，因为我不太喜欢双冒号位。我研究发现:hover和其他单个冒号类引用是在满足特定条件时，例如鼠标悬停在上面，并且双冒号意味着引用在技术上不存在但可以抓取样式？并且它被称为伪元素（我认为）。

我也遇到过很多这样的例子： document.getElementById("testDiv").pseudoStyle("before","color","purple");

而且：

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0); document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

我尝试将其改编为我自己的用途并做了其他的事情，如：

    var sliderButton = document.getElementById("myRange");
    sliderButton.pseudoStyle("::-webkit-slider-thumb","background",rgb(r, 0, b)); 
    //where r and b are predefined values between 0 and 255

和： document.styleSheets[0].addRule('.slider::-webkit-slider-thumb','background: green');

这些都不适合我，这可能是非常明显的，我做错了但我无法弄清楚我的生活。我只需要一种方法来更改代码中的.slider::-webkit-slider-thumb background值。感谢有任何想法的人

＆＃13;

.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #c6c6c6;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .3s;
      transition: opacity .3s;
    }
    .slider:hover {
      opacity: 1;
      background: grey;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: red;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

＆＃13;

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

＆＃13;

Answer 1

要了解@ guest271314提供的解决方案，如果为input或change事件设置事件处理程序并生成随机颜色，则可以获得动态颜色。您甚至可以在阵列中存储所需的颜色，并随机提取其中一种以限制调色板。

var s = document.getElementById("myRange");

s.addEventListener("input", function(){

  // Generate random color
  
  // Hex:
  //var color = '#'+Math.floor(Math.random()*16777215).toString(16);
  
  // RGB:
  var num = Math.round("0xffffff" * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  var color = 'rgb(' + r + ', ' + g + ', ' + b + ')';  
  
  // Loop over the CSS rules in the document's stylesheets
  for (let {cssRules} of document.styleSheets) {
  
    // Loop over the selector and styles of each rule
    for (let {selectorText, style} of cssRules) {
      // Check the selector for a match
      if (selectorText === ".slider::-webkit-slider-thumb") {
        // Update the style:
        style.backgroundColor = color;
      }
    }
  }
});

.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #c6c6c6;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .3s;
      transition: opacity .3s;
    }
    .slider:hover {
      opacity: 1;
      background: grey;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: red;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

Answer 2

您可以重复document.styleSheets，检查.cssRules是否匹配.selectorText，然后设置.style

的CSSStyleRule

＆＃13;

for (let {cssRules} of document.styleSheets) {
  for (let {selectorText, style} of cssRules) {
    if (selectorText === ".slider::-webkit-slider-thumb") {
      style.backgroundColor = "green";
    }
  }
}

＆＃13;

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #c6c6c6;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .3s;
  transition: opacity .3s;
}

.slider:hover {
  opacity: 1;
  background: grey;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

＆＃13;

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

＆＃13;

在滚动时更改html滑块按钮的颜色

2 个答案: