如何使用querySelectorAll()获取style属性中order值为1的元素？

你可以通过属性选择器的匹配规则来精准定位，直接在querySelectorAll里编写更具体的选择器：

• 基础匹配：直接匹配style属性包含order: 1的section元素

  document.querySelectorAll('section[style*="order: 1"]')
  

  这里的*=表示属性值包含指定字符串，能兼容style里order: 1、order: 1;、order: 1 等带不同后缀的写法。

• 精准匹配：避免误匹配order: 10这类情况

  document.querySelectorAll('section[style*="order: 1;"], section[style*="order: 1 "]')
  

  同时匹配带分号结尾和空格结尾的order:1写法，减少错误匹配的概率。

如果担心style属性的写法不统一（比如无空格的order:1），也可以先获取所有带style的section元素，再通过计算样式筛选：

Array.from(document.querySelectorAll('section[style]')).filter(element => {
  return getComputedStyle(element).order === '1';
})

这种方法会读取元素实际生效的order值，不受style属性内的写法格式影响，准确性更高。

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