为何图片onclick事件已触发，但亮度未发生变化？

你给this.style.filter赋值时传入的字符串末尾多了一个分号，形成了非法的CSS属性值，导致浏览器直接丢弃了这次样式修改操作。

• 原代码里的赋值内容是 'brightness(100%);'，末尾的分号是CSS样式表中用来分隔不同样式声明的符号，不属于单个CSS属性的合法值范围
• 浏览器遇到非法的CSS属性值时会静默失败，不会抛出控制台报错，所以你能正常看到点击触发的日志输出，却看不到图片亮度的变化

方法1：删除属性值中多余的分号 #

将赋值语句里字符串的末尾分号移除，保证传入的属性值符合CSS语法规范，修正后的完整代码：

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

方法2：通过CSS类切换实现（更易维护） #

直接手写行内样式字符串很容易出现语法疏漏，更稳妥的实现方式是提前定义好不同状态对应的样式类，点击时通过类名切换完成样式变更，从根源上避免手写样式的语法错误，示例代码：

<style>
  .img-hidden {
    filter: brightness(0%);
  }
  .img-visible {
    filter: brightness(100%);
  }
</style>
<img src="http://placekitten.com/200/300"
     class="img-hidden"
     onclick="this.classList.toggle('img-hidden'); 
              this.classList.toggle('img-visible'); 
              console.log('clicked!')">

内容的提问来源于stack exchange，提问作者user3574603