javascript - 在全身的某些元素上添加和删除过滤器

Question

所以，我有一个 div(一个表单容器)和一个菜单。我想在按下菜单中的某个按钮时模糊背景，除了容器和 div，让它成为:

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

我知道我可以用它来完成我的工作:

body > *:not(.loginContainer):not(#navDivWrapper) {
filter: blur(3px); 
}

但是一旦应用，我真的不知道如何删除这个过滤器。我在徘徊如何使用 Javascript 执行此操作，但我是 Javascript 的菜鸟，我无法弄清楚。我在想

var elems = document.body.getElementsByTagName("*");

然后循环检查所有选定元素中的特定元素。但我也无法从中获得模糊风格。

Answer 1

But once applied, I don't really know how to remove this filter.

您可以查询相同的 css-selector 并应用 filter:none

var elements = document.querySelectorAll( "body > *:not(.loginContainer):not(#navDivWrapper)" );
Array.from( elements ).forEach( s => s.style.filter = "none" );