如何使用 queryselector 通过其 id 排除元素

Question

我正在使用 w3school 的 Tryit 编辑器在 <div> 中 select 一个 <p> 元素。试图模糊 <div> 中排除 <p> 的内容是行不通的。这就是我的意思：

function myFunction() {
  document.querySelector("#blurred:not(#text)").style.webkitFilter = "blur(10px)";
}

<br>

<h2 class="example">A heading with class="example"</h2>
<div id="blurred">
  <p id="text">A paragraph with class="example".</p>

  <p>Click the button to add a background color to the first element in the document with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>

如何从模糊中排除 ID 为 #text 的 <p>？

Answer 1

使用您要排除的 ID 定位 p：

#blurred p:not(#text)

function myFunction() {
  const div = document.querySelector("#blurred p:not(#text)")
  div.style.webkitFilter = "blur(10px)";
}

<h2 class="example">A heading with class="example"</h2>
<div id="blurred">
  <p id="text">A paragraph with class="example".</p>
  <p>Click the button to add a background color to the first element in the document with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>

Answer 2

您需要 select 所有子元素使用 *。然后使用 :not select 或排除 #text

function myFunction() {
  document.querySelector("#blurred *:not(#text)").style.webkitFilter =
    "blur(10px)";
}

或者您可以直接定位 #blurred 内的所有 p 元素，例如

#blurred p:not(#text)

Answer 3

您可以使用背景滤镜属性仅模糊 div 内容后面的区域。我使用 jQuery.

做到了

function myFunction() {
  const div = document.querySelector("#blurred p:not(#text)")
  $(div).css("backdrop-filter", "blur(10px)");
}

或更清洁的版本：

function myFunction() {
  $("#blurred p:not(#text)").css("backdrop-filter", "blur(10px)");
}

如何使用 queryselector 通过其 id 排除元素

How to exclude element through its id using queryselector

html

javascript

dom