Estoy tratando de capturar los elementos que no contienen un tipo de visualización de ninguno.
let pfCard = document.getElementsByClassName("PortfolioCard").style.display = 'block';Esto no parece funcionar, ya que creo que está intentando modificar el tipo de estilo en lugar de recuperarlo.
Puede hacer esto obteniendo todos sus elementos por nombre de clase y luego usando el filter en esa lista.
const blockElements = [...document.getElementsByClassName("PortfolioCard")].filter(x => x.style.display == "block"); console.log(blockElements.length); <div class="PortfolioCard" style="display:block">block</div> <div class="PortfolioCard">not block</div> <div class="PortfolioCard" style="display:block">block</div>Probablemente tendría que querySelectorAll(".PortfolioCard") para obtener una matriz de ellos, luego .filter() la matriz buscando style.display != 'none' .
Una mejor solución sería si separas tu propiedad display: none en una pequeña clase de utilidad como: .hide-portfolio { display: none; } , y ocultarlos de esa manera. Luego puede buscarlos con querySelectorAll(".PortfolioCard:not(.hide-portfolio)");
¿Quizás este?
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> O use array.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>