'Is there a way to create an array of an element that contains a specific CSS style?

I'm trying to capture the elements that do not contain a display type of none.

let pfCard = document.getElementsByClassName("PortfolioCard").style.display = 'block';

This doesn't seem to be working as I believe it is attempting to modify the style type instead of retrieve it.

javascript

Solution 1:^[1]

You'd probably have to querySelectorAll(".PortfolioCard") to get an array of them, then .filter() the array looking for style.display != 'none'.

A nicer solution would be if you separate your display: none property into a small utility class like: .hide-portfolio { display: none; }, and hide them that way. Then you can search for them with querySelectorAll(".PortfolioCard:not(.hide-portfolio)");

Solution 2:^[2]

Maybe this one?

console.log([...document.getElementsByClassName("PortfolioCard")].filter(item=> window.getComputedStyle(item).getPropertyValue('display') != "block"))

<div class='PortfolioCard' style='display:block'></div>
<div class="PortfolioCard" style="display:block"></div>
<div class="PortfolioCard" style='display:none'></div>

Or usearray.forEach:

let arr= [];
[...document.getElementsByClassName("PortfolioCard")].forEach(item=>{
if(window.getComputedStyle(item).getPropertyValue('display') != "block") 
arr.push(item)
})
console.log(arr)

<div class='PortfolioCard' style='display:block'></div>
<div class="PortfolioCard" style="display:block"></div>
<div class="PortfolioCard" style='display:none'></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nicolas Goosen
Solution 2

'Is there a way to create an array of an element that contains a specific CSS style?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]