如何使用JavaScript正确设置--webkit-backdrop-filter样式属性？

错误原因梳理 #

• CSS自定义变量命名规范要求必须以两个短横杠--开头，原CSS中直接写var(effect)不符合规范，浏览器无法识别该自定义变量
• setAttribute是用来操作HTML元素原生属性（如id、class）的方法，不能直接设置CSS样式，自然不会生效

修正方案 #

1. 自定义变量方案（推荐）

首先修正CSS中自定义变量的命名，补充--前缀：

.titlebar{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(12, 40, 82,0.9);
    -webkit-backdrop-filter: var(--effect);
    backdrop-filter: var(--effect);
    transition: 0.4s;
}

再修改JS代码，设置变量时保持和CSS中一致的命名：

navBarBg.style.setProperty("--effect","blur(20px)");

2. 直接设置样式属性方案

如果不想使用自定义变量，可以直接操作元素的style对象，两种写法都可以：

// 写法1：属性名转驼峰格式
navBarBg.style.webkitBackdropFilter = "blur(20px)";
navBarBg.style.backdropFilter = "blur(20px)";

// 写法2：用setProperty传入完整属性名
navBarBg.style.setProperty("-webkit-backdrop-filter", "blur(20px)");
navBarBg.style.setProperty("backdrop-filter", "blur(20px)");

注意事项 #

• 毛玻璃效果需要背景色为半透明才能显示，如果背景色完全不透明，设置backdrop-filter后不会有视觉变化
• 目前主流新版本Chrome、Safari浏览器均已原生支持该属性，无需额外配置

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