JS：为什么当图像点击事件触发时，图像亮度没有变化？

Question

我在页面上有一张亮度设置为0%的图像。当用户点击时，亮度应变为100%

<img src="http://placekitten.com/200/300"
style="filter: brightness(0%);"
onclick="this.style.filter = 'brightness(100%);'; console.log('clicked!')">

(此处为JSFiddle(

我可以从日志消息中看到onclick事件触发，但图像保持不变。单击图像时如何更改图像亮度？

Answer 1

试着这样做。我更新了你的小提琴。

https://jsfiddle.net/ea1n043c/2/

let img = document.getElementsByTagName("img")[0];
img.addEventListener("click", function() {
console.log(this);
this.style.filter = "brightness(100%)";
});

<img src="http://placekitten.com/200/300"
style="filter: brightness(0%);">

对我来说，它直接起到了作用。干杯