通过属性选择display:flex元素时querySelectorAll返回空数组问题

• 你的代码失效的核心原因：[display="flex"]是HTML属性选择器，只会匹配标签上直接写的display属性（比如 <div class="DOMDivCont" display="flex">），但display:flex是CSS样式属性，不属于HTML标签属性，所以匹配不到任何元素。

• 两种正确的实现方式：

  1. 通用方案（推荐）：获取所有目标元素后，通过计算样式筛选
     这种方法能匹配所有生效的display:flex（包括外部样式表、内部样式、内联样式设置的），代码如下：

     const flexElements = Array.from(document.querySelectorAll('.DOMDivCont')).filter(element => {
       return getComputedStyle(element).display === 'flex';
     });
     

  2. 仅匹配内联样式的方案：如果你的display:flex是写在元素的style属性里的，可以用属性选择器匹配style属性的内容：

     document.querySelectorAll('.DOMDivCont[style*="display:flex"]');
     

     注意：这种方式只能识别内联样式里的设置，外部/内部样式表定义的display:flex无法被匹配到。

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