更改值时，HTML5 范围无法使用 javascript 将线性渐变设置为背景。

Question

我创建了一个自定义线性渐变作为 HTML Range 的背景。当我尝试更改范围值时，JavaScript 代码会更改背景线性宽度。正如您在代码片段中看到的，它在开头设置了颜色。但是更改值后，它会在该样式中添加未知的中心（请检查日志）类，并且无法正确设置颜色。如何摆脱这个中心阶级。或者有什么方法可以做到这一点而不用这种方式？（请检查以下片段。）任何帮助将不胜感激

document.getElementById("sliderPrice").oninput = function() {

      $color = 'linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) left/' + (100 - parseFloat(this.value / 1000)) + '% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/' + this.value / 1000 + '% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/' + this.value / 1000 + '% 100%';

      this.style.background = $color;

      console.log($color);

      console.log(this.style.background);

 

    };

#sliderPrice {

    width: 80%;

    position: relative;

    margin-left: 8vw;

    background: linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;

    background-repeat: no-repeat;

    background-blend-mode: hard-light,normal;

    border-radius: 10px;

    border-radius: 8px;

    height: 7px;

    outline: none;

    transition: background 450ms ease-in;

    -webkit-appearance: none;

}

<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

Answer 1

您遇到的第一个问题是渐变中的位置（第一个渐变是左侧而不是右侧）。要更新背景，您可以使用 css 自定义属性并更新它。可能固定。（添加Math.round()以缩短背景大小重新计算值，仅用于控制台中的可读性）let range = document.getElementById("sliderPrice");range.oninput = function() {&nbsp; $color =&nbsp; &nbsp; "linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right / " +&nbsp; &nbsp; Math.round((100 - parseFloat(this.value / 1000))) +&nbsp; &nbsp; "% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left / " +&nbsp; &nbsp; this.value / 1000 +&nbsp; &nbsp; "% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/" +&nbsp; &nbsp; Math.round(parseFloat(this.value / 1000)) +&nbsp; &nbsp; "% 100%";&nbsp; document.documentElement.style.setProperty("--newBg", $color);&nbsp; console.log($color);&nbsp; console.log(&nbsp; &nbsp; getComputedStyle(document.documentElement).getPropertyValue("--newBg")&nbsp; );};:root {&nbsp; --newBg: linear-gradient(#f1f1f1, #f1f1f1, #f1f1f1) right/80% 100%, linear-gradient(180deg, #eb96de 0%, #8d217d 100%) left/20% 100%, linear-gradient(180deg, #8d217d 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;}#sliderPrice {&nbsp; width: 80%;&nbsp; position: relative;&nbsp; margin-left: 8vw;&nbsp; background: var(--newBg);&nbsp; background-repeat: no-repeat;&nbsp; background-blend-mode: hard-light, normal;&nbsp; border-radius: 10px;&nbsp; border-radius: 8px;&nbsp; height: 7px;&nbsp; outline: none;&nbsp; transition: background 450ms ease-in;&nbsp; -webkit-appearance: none;}<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

Answer 2

您正在尝试使用 JavaScript 更改 DOM 元素的 css。我认为这是不可能的。要么使用 CSS 控制一切，要么将整个控制权放在 JS 上。我潦草地写下了后者：document.getElementById("sliderPrice").oninput = function() {&nbsp; const value = parseFloat(this.value / 1000);&nbsp; const cssText = `width: 80%;&nbsp; position: relative;&nbsp; margin-left: 8vw;&nbsp; background: linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/${value}% 100%;&nbsp; background-repeat: no-repeat;&nbsp; background-blend-mode: hard-light, normal;&nbsp; border-radius: 10px;&nbsp; border-radius: 8px;&nbsp; height: 7px;&nbsp; outline: none;&nbsp; transition: background 450ms ease-in;&nbsp; -webkit-appearance: none;&nbsp; `;&nbsp; this.style.cssText = cssText;&nbsp; console.log(this.style.background);};<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />请注意，我没有在 eventHandler 外部初始化 CSS，因此当您更改滑块时它就会开始工作。

Answer 3

我不知道为什么会发生这种情况，解决方法可能是：动态地将 CSS 样式添加到 html 标头，然后将类添加到元素而不是设置其样式。var bgGradient = 'linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;',/*above css style do not works on the snippet(maybe the problem is on the syntax of the gradient?),so i used simply #000 color*/&nbsp; &nbsp; css = '.mydivclass{ background:#000 !important;&nbsp; }',&nbsp; &nbsp; head = document.head || document.getElementsByTagName('head')[0],&nbsp; &nbsp; style = document.createElement('style'),&nbsp; &nbsp; mydiv = document.getElementById('mydiv');head.appendChild(style);style.type = 'text/css';if (style.styleSheet){&nbsp; // This is required for IE8 and below.&nbsp; style.styleSheet.cssText = css;} else {&nbsp; style.appendChild(document.createTextNode(css));}head.appendChild(style)/*then add or remove the class to your element*/setInterval(()=>{&nbsp; if(mydiv.classList.contains('mydivclass'))&nbsp; &nbsp; return mydiv.classList.remove('mydivclass')&nbsp; mydiv.classList.add('mydivclass')},1000)#mydiv{&nbsp; width:100px;&nbsp; height:100px;&nbsp; background: yellow;}<html><head></head><body><div id="mydiv"></div></body></html>

Answer 4

我想这就是你想要的......您在第一个线性渐变中错过了正确的属性。您还需要重置 CSS 中的一些背景属性以及您覆盖的 Javascript 操作...我希望这有帮助！😁document.getElementById("sliderPrice").oninput = function() {&nbsp; const progress = Math.round(parseFloat(this.value / 1000));&nbsp;&nbsp;&nbsp; $color = `linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right/${100 - progress}% 100%,&nbsp;&nbsp;&nbsp; linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/${progress}% 100%,&nbsp;&nbsp;&nbsp; linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/${progress}% 100%`;&nbsp; this.style.background = $color;&nbsp; this.style['background-repeat'] = 'no-repeat';&nbsp; this.style['background-blend-mode'] = 'hard-light, normal';};#sliderPrice {&nbsp; width: 80%;&nbsp; position: relative;&nbsp; margin-left: 8vw;&nbsp; background:&nbsp; linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,&nbsp; linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,&nbsp; linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;&nbsp; background-repeat: no-repeat;&nbsp; background-blend-mode: hard-light, normal;&nbsp; border-radius: 10px;&nbsp; border-radius: 8px;&nbsp; height: 7px;&nbsp; outline: none;&nbsp; transition: background 250ms ease-in;&nbsp; -webkit-appearance: none;}#c {&nbsp; width: 100px;&nbsp; height:100px;&nbsp; display:inline-block;&nbsp; &nbsp; background:&nbsp; &nbsp; &nbsp; linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,&nbsp; &nbsp; &nbsp; linear-gradient(180deg, red 0%, blue 100%) left/20% 100%;&nbsp; background-repeat: no-repeat;&nbsp; background-blend-mode: hard-light, normal;&nbsp; transition: background 450ms ease-in;}<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />