style.opacity是设置元素透明度最轻量的js方式，只接受0–1数字（如0.7），不支持百分比或单位；它会乘性影响子元素，且设为0时元素仍占位、可交互。
style.opacity 是直接操作 DOM 元素透明度最轻量的方式，但它只接受 0 到 1 之间的数字（含小数），不能写百分比、不能写单位、也不能写字符串如 "50%" —— 写错就完全失效。
用 style.opacity 设置元素透明度的正确写法
它属于 JavaScript 中 HTMLElement.style 的可读写属性，本质是内联样式的映射。赋值后立即生效，无需重排或强制刷新。
-
element.style.opacity = "0.7"✅ 正确：字符串形式的小数（引号可选，但建议加） -
element.style.opacity = 0.7✅ 正确：数值类型，浏览器自动转为字符串 -
element.style.opacity = "70%"❌ 失效：CSS 不认百分比写法 -
element.style.opacity = "0.7px"❌ 失效：带单位会被忽略 -
element.style.opacity = ""❌ 清空后恢复为默认1，但不是“继承父级”，而是退回到未设置状态
为什么设了 style.opacity = "1" 子元素还是发灰？
因为 opacity 不是独立渲染属性，它会创建新的层叠上下文，并且透明度在渲染树中是**乘性叠加**的。父元素设了 0.6，子元素即使写 style.opacity = "1"，最终视觉透明度仍是 0.6 × 1 = 0.6。
- 子元素无法靠自身
opacity“抵消”父级影响 - 想让子内容不透明，必须把该内容从父容器中抽离出来（比如用绝对定位 + 同级结构），或改用
rgba()控制背景色 - 不要试图用
!important或多次赋值覆盖，没用
style.opacity 和 CSS 类切换哪个更合适？
纯 JS 动态控制（比如 hover、点击、滚动触发）优先用 style.opacity；批量样式变更、响应式状态、需要复用逻辑时，用 class 切换更稳。
- 用
style.opacity：适合单次、临时、数值连续变化（如淡入动画帧） - 用 class：
.faded { opacity: 0.4; }+element.classList.add("faded")，更适合维护、可被 CSS 过渡捕获、避免 JS 与样式耦合过紧 - 注意：如果同时存在 class 和
style.opacity，后者优先级更高，会覆盖 CSS 中的opacity
IE8 兼容不是靠 style.opacity 解决的
IE8 及更早版本根本不支持 style.opacity，访问会返回 undefined，赋值也无效。真要兼容，得降级到 style.filter：
if (element.style.opacity === undefined) {
element.style.filter = "alpha(opacity=40)";
}
但这个 filter 只能控制整体透明度，且 alpha 值是 0–100 整数，和 opacity 的 0–1 不互通。2026 年绝大多数项目已无需考虑 IE8，硬加兼容反而增加运行时判断负担和潜在 bug。
真正容易被忽略的是：设了 style.opacity = "0" 的元素依然占据布局空间、仍能响应 click，如果本意是“隐藏+禁用交互”，得额外加 element.style.pointerEvents = "none" 和 element.style.visibility = "hidden"（后者不影响事件），或者干脆用 display: none —— 但那就不是透明度的事了。
