更改值时，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() {

  $color =

    "linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right / " +

    Math.round((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/" +

    Math.round(parseFloat(this.value / 1000)) +

    "% 100%";

  document.documentElement.style.setProperty("--newBg", $color);

  console.log($color);

  console.log(

    getComputedStyle(document.documentElement).getPropertyValue("--newBg")

  );

};

:root {

  --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 {

  width: 80%;

  position: relative;

  margin-left: 8vw;

  background: var(--newBg);

  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 2

您正在尝试使用 JavaScript 更改 DOM 元素的 css。我认为这是不可能的。要么使用 CSS 控制一切，要么将整个控制权放在 JS 上。我潦草地写下了后者：

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

  const value = parseFloat(this.value / 1000);

  const cssText = `width: 80%;

  position: relative;

  margin-left: 8vw;

  background: linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/${value}% 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;

  `;

  this.style.cssText = cssText;

  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

*/

    css = '.mydivclass{ background:#000 !important;  }',

    head = document.head || document.getElementsByTagName('head')[0],

    style = document.createElement('style'),

    mydiv = document.getElementById('mydiv');

head.appendChild(style);

style.type = 'text/css';

if (style.styleSheet){

  // This is required for IE8 and below.

  style.styleSheet.cssText = css;

} else {

  style.appendChild(document.createTextNode(css));

}

head.appendChild(style)

/*

then add or remove the class to your element

*/

setInterval(()=>{

  if(mydiv.classList.contains('mydivclass'))

    return mydiv.classList.remove('mydivclass')

  mydiv.classList.add('mydivclass')

},1000)

#mydiv{

  width:100px;

  height:100px;

  background: yellow;

}

<html>

<head>

</head>

<body>

<div id="mydiv">

</div>

</body>

</html>

Answer 4

我想这就是你想要的......

您在第一个线性渐变中错过了正确的属性。

您还需要重置 CSS 中的一些背景属性以及您覆盖的 Javascript 操作...

我希望这有帮助！😁

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

  const progress = Math.round(parseFloat(this.value / 1000));

  

  $color = `linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right/${100 - progress}% 100%,

  

  linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/${progress}% 100%,

  

  linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/${progress}% 100%`;

  this.style.background = $color;

  this.style['background-repeat'] = 'no-repeat';

  this.style['background-blend-mode'] = 'hard-light, normal';

};

#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 250ms ease-in;

  -webkit-appearance: none;

}

#c {

  width: 100px;

  height:100px;

  display:inline-block;

    background:

      linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,

      linear-gradient(180deg, red 0%, blue 100%) left/20% 100%;

  background-repeat: no-repeat;

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

  transition: background 450ms ease-in;

}

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