如何创建包含特定CSS样式的元素数组？及如何正确捕获display属性不为none的PortfolioCard元素？

嘿，我来帮你解决这两个问题！

当然可以！有几种实用的方法能实现这个需求：

• 方法一：结合CSS选择器与数组转换
  如果目标元素的样式可以通过CSS选择器直接定位（比如内联样式里明确写了display: none），你可以用document.querySelectorAll匹配元素，再转成数组：

  // 筛选所有class为PortfolioCard且内联样式不含display:none的元素
  const targetElements = Array.from(document.querySelectorAll('.PortfolioCard:not([style*="display:none"])'));
  

• 方法二：先获取元素集，再过滤样式
  要是样式是通过外部CSS或类名设置的，就得用window.getComputedStyle获取元素实际生效的样式，再做筛选：

  // 先把HTMLCollection转成数组，再过滤出display不为none的元素
  const targetElements = Array.from(document.getElementsByClassName('PortfolioCard'))
    .filter(el => window.getComputedStyle(el).display !== 'none');
  

  这里getComputedStyle的优势是能拿到元素最终应用的样式——不管样式来自内联代码、外部样式表还是继承规则。

先拆解你代码的问题：
document.getElementsByClassName("PortfolioCard")返回的是HTMLCollection（类数组的元素集合），不是单个元素，所以直接访问.style会报错；而且你的代码逻辑是在尝试给集合赋值display: block，不是筛选符合条件的元素。

给你两种修复后的写法：

写法一：基于getElementsByClassName #

// 转成数组后过滤出可见的PortfolioCard元素
const visiblePfCards = Array.from(document.getElementsByClassName("PortfolioCard"))
  .filter(card => window.getComputedStyle(card).display !== 'none');

写法二：更简洁的querySelectorAll #

// 先获取所有PortfolioCard，再过滤可见元素
const visiblePfCards = Array.from(document.querySelectorAll(".PortfolioCard"))
  .filter(card => window.getComputedStyle(card).display !== 'none');

如果你其实是想把所有PortfolioCard的display设为block，那正确的写法应该是遍历集合：

// 遍历所有PortfolioCard，设置display为block
document.querySelectorAll(".PortfolioCard").forEach(card => {
  card.style.display = 'block';
});

内容的提问来源于stack exchange，提问作者Austin Chiatto