用js模糊除一个div以外的整个div

Question

当我点击这个div时，我有div，在我调用js函数并想要模糊整个页面除了一个div。

编辑

添加完整代码

这是我的完整代码(我使用这个模板与后端Django(但我认为这不是Django的问题，这是我的前端问题->

{% extends "base.html" %}
{% block content %}
{% include "./navbar.html" %}
<div class="relative pt-6  w-7/12 left-80 ">
<div class="post">
<div class="p-6 mb-12 pb-16 w-full h-auto break-all bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 border border-gray-400">
<div class="mb-4">
<form>
{% if fav %}
<button type="submit" name="fav" class="absolute right-2 top-5 text-5xl ">&#9733;</button>
{% else %}
<button type="submit" name="fav" class="absolute right-2 top-5 text-5xl ">&#9734;</button>
{% endif %}
</form>
<h1>{{ detail.user }}</h1>
</div>
<div class="mb-2 flex ">
{% for a in detail.category.all %}
<p class="mr-2 text-sm text-blue-500">#{{ a.name }}</p>
{% endfor %}
</div>
<form class="float-right block" id="ld" action="{% url 'Profile:question-detail' pk=detail.id %}">
<div class="vote circle">
{% if like_ex %}
<button type="submit" name="like" class="block mb-2 increment up border-4 border-blue-800"></button>
{% else %}
<button type="submit" name="like" class="block mb-2 increment up "></button>
{% endif %}
{% if dislike_ex %}
<button type="submit" name="dislike"
class="block mb-2 increment down border-4 border-blue-800"></button>
{% else %}
<button type="submit" name="dislike" class="block mb-2 increment down "></button>
{% endif %}
<div class="count" onclick="t()">{{ detail.point }}</div>
</div>
<button type="button"  onclick="show()" class="relative bottom-4  h-8 w-28 px-5  text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-full border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">აქტივობა</button>
</form>
<h5 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">{{ detail.title }}</h5>
<p class="mb-4 font-normal text-gray-700 dark:text-gray-400">{{ detail.text }}</p>
<div class="activity ">
<p class="hidden"  onclick="hide()" id="test">test</p>
</div>
</div>

{% if can_update %}
{% if owner %}
<div class="relative bottom-8">
<a href="{% url 'Profile:update-question' object.id %}">
<button class="relative inline-flex p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
განახლება
</span>
</button>
</a>
</div>
{% endif %}
{% else %}
<div class="relative bottom-8">
<button class="relative inline-flex p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
განახლების ლიმიტი ამოწურული გაქვს
</span>
</button>
</div>
{% endif %}
</div>

<div class="w-full bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<form class="bg-white rounded-lg px-4 pt-2" method="post" id="comment" novalidate>
{% csrf_token %}
<div class="flex flex-wrap -mx-3 mb-6">
{% for field in form %}
{% if field.errors %}
<div class="ml-3 my-2 bg-red-200 border border-red-200 text-red-700 px-2 py-2 rounded relative">
<ul class="">
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
<div class="w-full md:w-full px-3 mb-2 mt-2">
{% for field in form %}
{{field}}
{% endfor %}
</div>
<div class="w-full md:w-full flex items-start md:w-full px-3">
<div class="-mr-1">
<a href="{ url Profile:question_detail detail.id }"><input type='submit' name="comment"
             class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100 cursor-pointer"
             value='დაკომენტარება'></a>
</div>
</div>
</form>
</div>
</div>
<div class="comments">
{% for a in detail.question.all %}
<div class="w-full bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 mt-8 mb-4 h-auto break-all p-4 border border-gray-400">
<div>
<p class="text-indigo-700 text-xl"> {{a.user}}</p>
</div>
<p class="fond-medium">{{a.text}}</p>
</div>
{% endfor %}
</div>
<script>
function show() {
document.getElementById('test').style.display = "block";
document.querySelectorAll('body >*:not(.test)')
.forEach(node => node.style.filter = "blur(2px)")
<!--  console.log(document.querySelector('body >*:not(.test)'))-->
}

function hide() {
document.getElementById('test').style.display = "none";
}
</script>
{% endblock %}

我该怎么办?谢谢大家的帮助

Answer 1

你的例子有多个问题。

首先:您正在使用document.getElementById('test')，而编写包含.test的查询。
您要么必须使用Id或Classname，如果这种混合是有意的，请提供一个最小的代码示例来复制问题。

第二:使用document.querySelector你只接收一个节点。你可能想把它改成

document.querySelectorAll('body >*:not(.test)').forEach(e => e.style.filter = "blur(2px)");

更改查询中选择的所有节点。

第三:如果您的测试div位于接收模糊的Node中，那么显然它也会被模糊。除了模糊所述测试元素的兄弟元素之外，没有其他规避。

Answer 2

你的方法有两个问题:

1. 您使用了querySelector-这只返回与您的选择器匹配的第一个元素。将其更改为querySelectorAll，您将收到一个包含所有元素的nodeList。然后，您可以使用.forEach循环这些，并应用过滤器。
如果你模糊了一个父元素，所有的子元素也会被模糊。确保要排除的div是body元素的直接子元素。

下面应该可以工作:

document.querySelectorAll('body >*:not(.test)')
.forEach(node => node.style.filter = "blur(2px)")

Answer 3

必须使用body标签的直接子节点，就像这样:

<body>
<div class="booking-info">
<div class="popup" id="pop">
<img src="images/Tick.png" alt="">
<h2>Congratulations!</h2>
<p>Your reservations have been successfully booked. Thanks!</p>
<button class="btn-style booking-btn" id="close-popup">Ok</button>
</div>
</div>
</body>
<script>
document.querySelectorAll('body >*:not(.booking-info)').forEach(e => e.style.filter = "blur(3px)");
</script>

在这里，一开始我尝试使用"弹出"类，它不是直接在body标签下面，这就是为什么模糊效果不起作用。但是在尝试使用直接子节点类之后，模糊效果除了我想要的块之外还有效。