使用滑塊使用Java更改圖像CSS過濾器

Question

我正在嘗試通過使用滑塊輸入來更改png上的css過濾器（准確地說是色調旋轉）。 我不斷收到“ -webkit-filter：hue-rotate（ undefined deg）”

謝謝你的幫助！

這是我的代碼：

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