javascript - 使用 slider 通过 Javascript 更改图像 CSS 过滤器

Question

我正在尝试使用 slider 输入更改 png 上的 css 过滤器(准确地说是色调旋转)。我不断收到“-webkit-filter:hue-rotate(undefineddeg)”

感谢您的帮助!

这是我的代码:

function hueFunction(hueVal) {
  var setAs = hueVal + "deg"
  document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")")
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)">

<br/>

<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Answer 1

将 oninput="hueFunction(this.hueVal)" 更改为 oninput="hueFunction(this.value)"

function hueFunction(hueVal) {
  var setAs = hueVal + "deg"
  document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")")
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">

<br/>

<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">