Estoy tratando de filtrar una serie de tarjetas de cartera para poder ver qué elementos se muestran o no.
let pfCard = document.getElementsByClassName("PortfolioCard") const visibleCards = [...document.getElementsByClassName("PortfolioCard")].filter(x => x.style.display != "none"); console.log(visibleCards.length); Las tarjetas mostradas tienen la visualización establecida en ninguno por una clase de arranque cuando se cumple la consulta de medios. El código que he estado tratando de ejecutar aún captura todos los elementos de la matriz sin importar el tipo de visualización. Hay 8 elementos en la matriz y 2 están configurados para display: none; corrientemente.
Debido a que la propiedad de visualización del elemento la establece el archivo CSS, deberá obtener el estilo calculado mediante window.getComputedStyle :
let pfCard = document.getElementsByClassName("PortfolioCard") const visibleCards = [...document.getElementsByClassName("PortfolioCard")].filter((x) => { return window.getComputedStyle(x).display != "none" }); console.log(visibleCards.length); .PortfolioCard { width: 100px; height: 100px; background: red; margin: 10px; } .PortfolioCard:nth-child(3) { display: none; } <div class="PortfolioCard"></div> <div class="PortfolioCard"></div> <div class="PortfolioCard"></div>