滑块范围的 HTML DOM 样式 backgroundImage 属性

Question

我有一个滑块范围，我想使用 javascript 更改它的背景图像属性。我尝试了以下脚本

document.getElementById("range").style.backgroundImage = "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)";

但它不起作用。有人可以给我一些提示我该怎么做吗？ 这是我正在研究的示例

https://codepen.io/am2222/pen/KKwZBNW

谢谢

P.S：我不想使用 jquery 或其他 js 库

Answer 1

将这里所做的从 jQuery 转换为 vanilla js：how to add CSS to -webkit-slider-runnable-track using Javascript

你来了：

var newScript = document.createElement("style");
var content = document.createTextNode(`input[type="range"]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)
}`);
newScript.appendChild(content);
document.getElementsByTagName("head")[0].appendChild(newScript); 

Answer 2

您只需将 CSS 中输入滑块的当前背景颜色分配给 CSS variable，然后使用 JavaScript 随时使用 setProperty() 方法更改该变量。

---

检查并运行以下代码片段以获取上述方法的实际示例：

//assign the root element of your document to a variable
let root = document.documentElement;

//change the value of "--rangeColor" accordingly
root.style.setProperty('--rangeColor', "linear-gradient(to top,#fafa6e,#f9f96e,#f8f86e,#f6f76d,#f5f56d,#f4f46d,#f3f36d,#f1f26d,#f0f16c,#efef6c,#eeee6c,#eced6c,#ebec6c,#eaeb6b,#e8e96b,#e7e86b,#e6e76b,#e4e66b,#e3e46a,#e2e36a,#e0e26a,#dfe16a,#dedf6a,#dcde69,#dbdd69,#dadb69,#d8da69,#d7d969,#d5d868,#d4d668,#d2d568,#d1d368,#d0d267,#ced167,#cdcf67,#cbce67,#cacd67,#c8cb66,#c7ca66,#c5c866,#c3c766,#c2c566,#c0c465,#bfc365,#bdc165,#bcc065,#babe64,#b8bd64,#b7bb64,#b5ba64,#b3b864,#b2b663,#b0b563,#aeb363,#acb263,#abb063,#a9ae62,#a7ad62,#a5ab62,#a3a962,#a1a861,#a0a661,#9ea461,#9ca261,#9aa160,#989f60,#969d60,#949b60,#929960,#8f975f,#8d965f,#8b945f,#89925f,#87905e,#848e5e,#828c5e,#808a5e,#7d885e,#7b855d,#78835d,#76815d,#737f5d,#717d5c,#6e7a5c,#6b785c,#68755c,#65735b,#62705b,#5f6e5b,#5c6b5b,#59685a,#55665a,#51635a,#4e605a,#4a5d59,#455a59,#415659,#3c5359,#375058,#314c58,#2a4858)");

:root {
  --rangeColor: #3071a9;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  box-shadow: none;
  background: var(--rangeColor);
  border-radius: 1.3px;
  border: 0.1px solid #010101;
}

<input id="range" type="range" />