如何使用javascript模糊除一个元素之外的所有元素

Question

我试图模糊除

p#this

标签之外的所有元素。请记住，我想在 javascript 中执行此操作。不是 jQuery 或 CSS，因为我正在尝试学习普通的 javascript。

在这个链接我发现了一些类似的答案。 @prog1011 给出了答案，我正在尝试实现，但它不起作用。

https://jsfiddle.net/Lgq4szte/1/

<h1>New Title</h1>
<h2>New Title 2</h2>
<h3>New Title 2</h3>
<p id="this">New paragraph</p>

JS

document.querySelector("body :not(#this)").style.filter = "blur(2px)";

如何模糊除

p#this

标签之外的所有元素？

Answer 1

结合使用

.querySelectorAll

和

.forEach

，因为

.style

只能在单个节点上使用：

document.querySelectorAll("body :not(#this)")
  .forEach(element => element.style.filter = "blur(2px)");

<h1>New Title</h1>
<h2>New Title 2</h2>
<h3>New Title 2</h3>
<p id="this">This paragraph</p>
<p id="that">That paragraph</p>

Answer 2

这有效

try {
  document.activeElement?.blur()
} catch {
  // ignore
}