有没有一种方法可以创建一个包含特定CSS样式的元素数组

Question

我正在尝试捕获不包含none显示类型的元素。

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

这似乎不起作用，因为我相信它试图修改样式类型，而不是检索它

Answer 1

您可以通过按类名获取所有元素，然后在该列表中使用filter来实现这一点。

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>

Answer 2

您可能需要querySelectorAll(".PortfolioCard")才能获得它们的数组，然后.filter()——查找style.display != 'none'的数组。

一个更好的解决方案是将display: none属性分离为一个小的实用程序类，如：.hide-portfolio { display: none; }，并以这种方式隐藏它们。然后你可以用querySelectorAll(".PortfolioCard:not(.hide-portfolio)");搜索它们

Answer 3

也许是这个？

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>

或者使用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>