javascript - Slider 范围的 HTML DOM 样式 backgroundImage 属性

Question

我有一个 slider 范围，我想使用 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);