最简单方法是用 onclick 和 style.opacity 直接切换：<img src="photo.jpg" style="opacity:1;" onclick="this.style.opacity=this.style.opacity=='1'?'0.4':'1';">，但需注意 opacity 是 CSS 属性、必须通过 style 对象设置，且初始状态要显式声明避免闪动。
用 onclick 和 style.opacity 直接切换最简单
不需要框架或额外库，原生 HTML + JS 就能搞定。核心是监听点击事件，动态改 img 元素的 style.opacity 值。注意：opacity 是 CSS 属性，必须通过 JS 的 style 对象设置，不能直接写成 opacity="0.5" 这种 HTML 属性。
常见错误是把 opacity 当成 HTML 属性写在标签里，比如：<img opacity="0.3"> —— 这完全无效，浏览器会忽略。
- opacity 取值范围是
0（全透明）到1（不透明），支持小数，如0.7 - 初始状态建议用内联
style="opacity: 1;"或外部 CSS 设置，避免 JS 执行前闪动 - 别用
filter: opacity()替代，它和style.opacity行为不完全一致（比如影响子元素、触发重排不同）
如何实现「点击一次变半透，再点恢复」的切换逻辑
关键在记录当前状态。最稳妥的方式是读取当前 style.opacity 值并判断，而不是用布尔变量维护——因为手动改过样式、或有 CSS 动画干扰时，布尔变量容易失步。
示例代码（可直接粘贴测试）：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" style="opacity: 1;" onclick="this.style.opacity = this.style.opacity == '1' ? '0.4' : '1';">
这段代码够用，但要注意几个坑：
-
this.style.opacity读出来的是字符串，比如"1"或"0.4"，不能用== 1这种数字比较 - 如果图片初始没设
style.opacity（只靠 CSS 类控制），this.style.opacity会返回空字符串，导致判断失效 - 想兼容初始由 CSS 控制的情况，得用
getComputedStyle(this).opacity，但会略重一点
用 classList.toggle() 配合 CSS 类更健壮
把透明度逻辑交给 CSS，JS 只管开关类名，解耦清晰、易维护、动画也方便加。这是中等复杂度项目的推荐做法。
CSS 部分：
.faded { opacity: 0.3; transition: opacity 0.2s ease; }
HTML + JS 部分：
<img src="photo.jpg" class="my-img" onclick="this.classList.toggle('faded');">
优势很明显：
- transition 写在 CSS 里，自然带淡入淡出，不用 JS 模拟
- 多个图片共享同一套样式，不用重复写 inline style
- 后续要改透明度值或动画时长，只改 CSS，不碰 HTML/JS
- 避免了读取
style.opacity的各种边界情况（比如初始为空、被其他脚本覆盖）
移动端点击无响应？记得加 cursor: pointer 和触摸适配
部分安卓 WebView 或旧版 iOS Safari 在 img 上点击没反应，不是 JS 问题，而是浏览器没识别出这是可点击区域。
两个必须动作：
- 给图片加 CSS：
cursor: pointer;（视觉提示 + 触发某些 UA 的点击激活） - 确保图片有明确尺寸（比如
width和height），避免因盒模型塌陷导致点击热区丢失 - 如果仍不响应，加一个空的
ontouchstart=""到<img>标签里，强制启用触摸事件捕获
真正麻烦的不是怎么切透明度，而是状态同步和跨端一致性——比如用户快速连点两次，或从 PC 切到手机，CSS 类和内联样式的优先级、transition 中断行为、甚至 getComputedStyle 的返回精度都会冒出来。先跑通再优化，比一开始堆 fancy 效果实在得多。
