1

I am trying to blur all elements except the p#this tag. Remember that I would like to do this in javascript. Not jQuery or CSS as I am trying to learn vanilla javascript.

On this link I found somewhat a similar answer. @prog1011 gave an answer and I am trying to implement but it did not work.

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)";

How I can blur all elements except for p#this tag?

wscourge
  • 10,657
  • 14
  • 59
  • 80
Codecygen
  • 121
  • 1
  • 1
  • 10

1 Answers1

6

Combine usage of .querySelectorAll and .forEach, because .style can be used on a singular node only:

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>
wscourge
  • 10,657
  • 14
  • 59
  • 80