如何使用JavaScript修改元素的backdrop-filter属性

问题原因 #

你无法通过JS修改backdrop-filter属性的核心原因是属性名拼写不符合JS的style对象命名规则：

• CSS中带连字符的属性，在JavaScript的元素style对象中需要转换为驼峰命名格式，backdrop-filter对应的正确JS属性名是backdropFilter，你代码中写的全小写backdropfilter缺少了大写的F，属于无效属性名，赋值自然不会生效。

修复后的代码 #

<html>
<head>
<title>a problem</title>
<style>
 #div {
  width: 120px;
  height: 120px;
  backdrop-filter: blur(0); 
  /* 补充：建议加半透明背景，否则filter效果可能不明显 */
  background: rgba(255,255,255,0.3);
 }
</style>
</head>
<body>
 <div id="div"></div>
</body>
<script>
// 修改属性名为驼峰格式即可生效
document.getElementById("div").style.backdropFilter = "blur(15px)";
</script>
</html>

额外注意点 #

• 如果需要兼容旧版本webkit内核浏览器，可以额外加上前缀属性赋值：document.getElementById("div").style.webkitBackdropFilter = "blur(15px)"
• 要确保目标元素没有设置完全不透明的背景色，否则backdrop-filter的效果会被自身背景遮挡无法观察到。

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