时间戳

首页 > 解决方案 > JS：为什么图像 onclick 事件触发时图像亮度没有变化？

javascript - JS：为什么图像 onclick 事件触发时图像亮度没有变化？

问题描述

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

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

（这里是JSFiddle ）

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

标签： javascript

解决方案

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

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%);">

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

推荐阅读