div被阻塞时Javascript模糊背景？答案

【问题标题】：Javascript Blur background when div is block?div被阻塞时Javascript模糊背景？
【发布时间】：2022-01-15 21:19:27
【问题描述】：

我在打开菜单时遇到了背景模糊的问题。我尝试自己写一些东西，但它不起作用。

function backgroundBlur() {
  var menuBox = document.getElementById("mobile-menu");
  var blur = document.getElementById("body");
  if (menuBox.style.dsiplay = "block") {
    blur.style.filter = "blur(3px)";
  }
}

【问题讨论】：

有什么错误吗？对于初学者，您拼错了“display”。
这一行的“显示”一词有错字：if (menuBox.style.dsiplay = "block") {
还有一点： 1、在if语句中，需要使用==或===（推荐===，但请注意区别）。 2、如果不改变变量的引用，可以声明为const（menuBox和blur变量）。 3.您可以将模糊命名为body（因为这是body）。 4.可以在包含滤镜模糊的css文件中声明一个类，只需将类添加到body中即可（而不是将css添加到js中）。
切换课程.....

标签： javascript html

【解决方案1】：

我认为问题可能是由三个原因引起的：

@RyanWalls 指出的错字
backgroundBlur() 方法未被调用
menuBox 的display 属性不是block

我跑了一个模拟这个事件：

let button = document.getElementById('setBlur');
let control = false;

function backgroundBlur(control) {
  var menuBox = document.getElementById("mobile-menu");
  var blur = document.getElementById("body");
  
  if (menuBox.style.display === "block")
  {
    if(!control)
    {
      blur.style.filter = "blur(3px)";
      button.innerHTML = 'Remove Blur';
    }
    else
    {
      blur.style.filter = "blur(0px)";
      button.innerHTML = 'Add Blur';
    }
  }
}

button.addEventListener('click', function() {
    backgroundBlur(control);
    control = !control;
});

*{
  margin: 0;
}
#body{
  background-color: black;
}
button{
  margin-top: 25px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
}
.vertical-menu {
  width: 200px;
}
.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}
.vertical-menu a:hover {
  background-color: #ccc;
}
.vertical-menu a.active {
  background-color: #04AA6D;
  color: white;
}

<div id="body">
  <div id="mobile-menu" style="display: block;">
    <div class="vertical-menu">
      <a href="#" class="active">Home</a>
      <a href="#">Link 1</a>
    </div>
  </div> 
</div>

<button id="setBlur">Add Blur</button>

【讨论】：

请将 if 语句 (menuBox.style.display = "block") 修改为 ===
为什么你的<button> 在<body> 之外？ OP 说#body（ID 为“body”的元素），而不是实际的文档正文。如果您模糊文档正文，所有内容都会被模糊。
@Terry 我注意到了一些有趣的事情；如果我不将display: block; 样式添加到`
` 标签，程序将无法运行；这样menuBox.style.display 的值就会被读取为空。
@AlonShmiel 我注意到了一些有趣的事情；如果我不将display: block; 样式添加到<div> 标签，程序将无法运行；这样menuBox.style.display 的值就会被读取为空。