JavaScript中如何高效获取设置了指定CSS属性的DOM元素？

可选的第四种方案（推荐） #

方案1：遍历CSSOM提取选择器批量查询

不需要遍历全量DOM，直接从样式表层面筛选所有配置了flex-wrap非nowrap值的选择器，再批量查询DOM即可，性能远高于全DOM遍历：

const flexWrapSelectors = new Set()
// 遍历所有样式表
for (const sheet of Array.from(document.styleSheets)) {
  try {
    // 跨域样式表会抛错，直接跳过
    const rules = Array.from(sheet.cssRules || sheet.rules)
    for (const rule of rules) {
      if (rule.style) {
        const flexWrap = rule.style.getPropertyValue('flex-wrap').trim()
        if (flexWrap && flexWrap !== 'nowrap') {
          flexWrapSelectors.add(rule.selectorText)
        }
      }
    }
  } catch (e) {}
}
// 补充内联样式设置flex-wrap的场景
flexWrapSelectors.add('[style*="flex-wrap: wrap"]')
flexWrapSelectors.add('[style*="flex-wrap: wrap-reverse"]')
// 拼接选择器批量查询
const flexWrapContainers = document.querySelectorAll(Array.from(flexWrapSelectors).join(','))

方案2：事件驱动自动收集（无遍历开销，性能最优）

利用CSS动画的触发事件自动匹配元素，完全不需要主动遍历任何DOM或样式表，还能自动识别动态新增的元素，适合超大型页面使用：

1. 先添加全局CSS规则

/* 定义一个无实际样式变化的空动画，不会触发重绘重排 */
@keyframes detect-flex-wrap {}
/* 所有元素默认绑定该动画，自动触发一次 */
* {
  animation: detect-flex-wrap 0.001s 1 running;
}

2. 监听动画触发事件，自动收集符合条件的元素

// 用WeakSet存储已处理元素，避免内存泄漏
const processedContainers = new WeakSet()
document.addEventListener('animationstart', (e) => {
  // 只处理我们定义的检测动画
  if (e.animationName !== 'detect-flex-wrap') return
  const el = e.target
  // 跳过已处理的元素
  if (processedContainers.has(el)) return
  // 验证flex属性
  const computedStyle = getComputedStyle(el)
  if (computedStyle.display.includes('flex') && computedStyle.flexWrap !== 'nowrap') {
    // 在这里执行你的flex-wrap容器尺寸调整逻辑
    processedContainers.add(el)
  }
})

关于CSS规范修复问题 #

CSS Box Alignment Module Level 3 中已经新增了针对flex-wrap容器的尺寸计算优化逻辑，目前Chrome 117+、Firefox 120+版本已经支持flex-wrap容器自动适配内容宽度，不会再出现多余右侧空白，但低于该版本的浏览器仍需要兼容处理。

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