点击切换灰度效果需js控制状态：监听click事件，用dataset记录当前灰度状态并直接设置style.filter，配合transition实现平滑动画，注意兼容safari前缀、避免内联样式覆盖及图片加载完成后再绑定事件。
用 CSS filter 实现点击切换灰度效果
直接给图片加 filter: grayscale(100%) 就能变灰，但“点击切换”需要状态记忆，纯 CSS 无法读取点击事件，必须配合 JavaScript 控制类名。核心思路是：默认彩色 → 点击加 grayscale 类 → 再点移除。
常见错误是只写 filter: grayscale(100%) 却没设过渡，导致切换生硬；或忘了加 cursor: pointer，用户看不出可点。
- 给
<img>绑定onclick，调用函数切换class - CSS 中定义
.grayscale { filter: grayscale(100%); transition: filter 0.3s ease; } - 务必加
transition，否则无动画，像闪退 - 移动端需额外加
touchstart防止延迟，或直接用addEventListener('click', ...)（现代浏览器已兼容）
避免 inline-style 覆盖 class 的陷阱
如果图片本身带了 style="filter: ..."，CSS 类里的 filter 就会被忽略——内联样式优先级高于 class。调试时看到“加了类却没反应”，先检查开发者工具里 filter 是否被划掉。
解决方法只有两个：删掉内联 style，或者改用 JavaScript 直接操作 element.style.filter（不推荐，维护性差）。
- 用
getComputedStyle(img).filter可读取当前生效的 filter 值，用于判断状态 - 不要混用
filter: grayscale(100%)和filter: url(#svg-grayscale)，后者优先级不同且难控制 - 若图片在
<picture></picture>或<source></source>里，要对最终渲染的<img>元素操作，不是对<source></source>
兼容旧版 Safari 和 iOS WebKit 的写法
Safari 15.4 之前不支持 filter 在 <img> 上的硬件加速，滚动时可能卡顿；iOS 14.5 以下甚至会忽略 transition。必须加前缀才能稳妥生效。
- CSS 中补上
-webkit-filter: grayscale(100%);和-webkit-transition: -webkit-filter 0.3s ease; - 别用
grayscale()的百分比简写（如grayscale(.8)），老 Safari 只认grayscale(80%) - 如果项目还要支持 IE，得彻底放弃
filter，改用 SVG 滤镜或 Canvas 处理——但 IE 连filter都不支持，实际已无人维护
用 dataset 记录状态比 classList 切换更可靠
靠 element.classList.toggle('grayscale') 看似简单，但若用户快速连点、或 JS 报错中断，class 状态可能和视觉不一致。更稳的方式是用 dataset 存当前灰度值。
img.addEventListener('click', () => {
const isGray = img.dataset.gray === 'true';
img.style.filter = isGray ? 'none' : 'grayscale(100%)';
img.dataset.gray = isGray ? 'false' : 'true';
});
这样无论中间发生什么，dataset 总是真实反映当前滤镜状态，且不依赖 CSS 类是否存在。
真正容易被忽略的是：图片加载完成前就点，img.naturalWidth 为 0，部分浏览器会忽略 filter；务必等 img.onload 后再绑定事件，或用 img.complete 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
