Skip to content
Advertisement

querySelector() where display is not none

I have a long list of <li> items I need to filter. I want the visible ones. Here’s an example hidden one:

JavaScript

Those which are not hidden don’t have a display visible attribute, they just don’t have a style attribute at all.

This gives me the opposite of what I want:

JavaScript

How can I select based on style attribute does not equal or contain “display:none;”?

Advertisement

Answer

This whole thing is kind-of hacky, but you could use the :not() selector to invert your selection. Beware some browser normalize the style attribute, so you will want to include a selector for the space that may be normalized in.

JavaScript
JavaScript

If you want you could also select both these elements and any child elements.

JavaScript
JavaScript

Of course, these only work when selecting elements with inline styles.

Advertisement