当输入值的范围类型更改时,更改主体的背景颜色

时间:2019-09-19 01:56:00

标签: javascript html css

我有一个范围类型的输入。当输入范围的值更改时,我想更改主体的背景颜色。

这是HTML

<div class="range">
    <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
</div>

这是Javascript代码

let slider = document.getElementById("myRange");
slider.onchange = () => {
    document.body.style.background = `linear-gradient(90deg,  #2b2e43 0%,#2b2e43 50%,#ffffff 50.1%,#ffffff 100%);`
}

1 个答案:

答案 0 :(得分:1)

我对其进行了一些修改,但是基本上,主要的问题是您在JS代码中的值上添加了分号,这不是必需的。

  function updateSlider() {
      document.body.style.background = `linear-gradient(90deg,  #2b2e43 0%,#2b2e43 50%,#ffffff 50.1%,#ffffff 100%)`;
 
  }
<div class="range">
    <input type="range" min="1" max="100" value="0" class="slider" id="myRange" onchange="updateSlider()">
</div>