Javascript 滑块范围的HTML DOM样式背景图像属性

我有一个滑块范围，我想用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)";

但它不起作用。谁能给我一些提示我怎么做？ 下面是我正在研究的示例

谢谢

---

注意：我不想使用jquery或其他js库将这里所做的从jquery转换为vanilla js：

你会发现：

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); 

---

您可以将css中输入滑块的当前背景色指定给，然后使用JavaScript随时使用该方法更改该变量

---

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

//将文档的根元素分配给变量
让root=document.documentElement；
//相应地更改“-rangeColor”的值
root.style.setProperty（'--rangeColor'，“线性渐变（到顶顶上，#费费费费费费费费费费费费费费费费费66E，ţf6f76d，355555F56D，费费费费费费666D，费费费费6E，费费费费6E，费费费666E，费费菲6C，355555F6F6F6D，F5F5F5F566D，3555FFFFFFFF666D，费费6D，费费费费费费费66D，，35556D，费费费费费费费费666D，费6D，费费费6D，费费费6D，费费费66D，费费66666D，费6D，费费6D，费6D，费6D，费费费费费66D，费费6D，费66D，费6.e6 6 6六六六六六六六六六六六六六六六六六六六六六六六六六六六六、六六六六六六、六六六六六六六六六六六、六六六六六六六六六六六六六六六六、六六六六六六六六个六六六六六六六六六六个六六六六六六六六六、六个六六六六六六六六六六六、六个六、六个六六六个六六个六、六个六个六六个六、六个六个六六个六、六个六六六个六个八、八、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六个18、六66、#c5c866、#c3c766、#c2c566、#c0c465，#bfc365，，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，3565，#BccccccC665，3565，，3565，3565，3565，，3565，3565，3565，，3565，3565，，3565，，，，，，3565，，，，，，，3565，3565，，，，，，3565，3565，，，，，，，3565，，，，，3565，，，，，，，，，，，3565，，，，，，，，，3565，，，，，，，，，，，，，，，，，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，9月26日，6月26日，6月26日，6月26日，9月26日，6月26日，9月26日，9月26日，6日，6月26日，6日，6月26日，6月26日，6日，6月26日，6月26日，6 6日，6日，6日，6月26日，6月26日，6日，6日，6月26日，6月26日，6日，6日，6月26日，6六六六六六六六六六六六五五五五五五F，，，，，，，，，，3555555555F，8 F975F，，，，#717d5c、#6e7a5c、#6b785c、#68755c、#65735b、62705b、5f6e5b、5C65B、59685a、55665a、51635a、4e605a、4a5d59、455a59、415659、3c5359、375058、314c58、2a4858）

：根目录{
--rangeColor:#3071a9；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
身高：100%；
光标：指针；
盒影：无；
背景：var（--rangeColor）；
边界半径：1.3倍；
边框：0.1px实心#010101；
}

---

相关：@pedrostrada谢谢，但我不想使用jquery。我想使用原生JSThank。但在这种情况下，我将手动向页面添加一种样式。因此，对于每个范围滑块，我必须向页面添加一种新样式？这是唯一的方法吗？谢谢。我喜欢这种方法。但如果我使用js制作范围滑块呢？我想此方法不起作用，因为每个滑块都需要有不同的背景色