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

4回答

九州编程

您遇到的第一个问题是渐变中的位置（第一个渐变是左侧而不是右侧）。要更新背景，您可以使用 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" />

0 0

杨__羊羊

您正在尝试使用 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，因此当您更改滑块时它就会开始工作。

0 0

jeck猫

我不知道为什么会发生这种情况，解决方法可能是：动态地将 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>

0 0

动漫人物

我想这就是你想要的......您在第一个线性渐变中错过了正确的属性。您还需要重置 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" />

0 0