如何通过JavaScript为页面元素添加及移除模糊滤镜？

嘿，这个需求其实很容易通过CSS类切换来实现，比直接操作元素样式要更简洁易维护，我给你一步步拆解：

1. 先定义模糊效果的CSS类 #

首先把你需要的模糊规则封装成一个CSS类，这样我们只需要给body添加/移除这个类就能控制效果：

/* 当body添加这个类时，所有直接子元素中排除指定容器的都会被模糊 */
.blur-active > *:not(.loginContainer):not(#navDivWrapper) {
  filter: blur(3px);
  /* 可选：添加过渡动画让模糊切换更平滑 */
  transition: filter 0.3s ease;
}

我把类名改成了blur-active，比原写法更语义化，你也可以换成自己喜欢的命名。

2. 编写JavaScript控制类的添加/移除 #

接下来写两个简单的函数，分别负责开启和关闭模糊效果：

// 开启背景模糊
function activateBlur() {
  document.body.classList.add('blur-active');
}

// 关闭背景模糊
function deactivateBlur() {
  document.body.classList.remove('blur-active');
}

如果需要点击按钮切换模糊状态（点一次开启，再点一次关闭），可以用toggle方法简化成一个函数：

function toggleBlur() {
  document.body.classList.toggle('blur-active');
}

3. 绑定到你的菜单按钮 #

把函数绑定到菜单按钮的onclick事件上，比如：

<div class="button"><a href="#" onclick="activateBlur()">Contact</a></div>

如果用切换功能，就改成：

<div class="button"><a href="#" onclick="toggleBlur()">Contact</a></div>

4. 如何移除模糊？ #

你可以在表单容器里加一个关闭按钮，或者给菜单外的区域绑定点击事件来移除模糊，比如：

<!-- 表单内的关闭按钮示例 -->
<div class="loginContainer">
  <!-- 表单内容 -->
  <button onclick="deactivateBlur()">关闭表单</button>
</div>

或者监听页面全局点击，点击非表单和菜单区域时自动移除模糊：

document.addEventListener('click', function(e) {
  const isFormOrMenu = e.target.closest('.loginContainer') || e.target.closest('#navDivWrapper');
  if (!isFormOrMenu && document.body.classList.contains('blur-active')) {
    deactivateBlur();
  }
});

为什么推荐用类切换而不是直接操作样式？ #

• 代码更清晰，CSS规则集中管理，后续修改模糊程度、过渡效果只需要改CSS
• 避免重复编写样式代码，移除效果只需要移除类，不用手动重置filter: none
• 兼容性更好，类切换是DOM操作中非常稳定的方法

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