Question

我正在使用以下函数来获取具有某个computedStyle的所有HTML元素。示例getCssByRule('margin-left')将生成一个数组，其中页面中的所有元素都有剩余边距。

getCssByRule (rule) {
  const elements = Array.from(document.querySelectorAll('*')).filter(e => {
    return parseInt(window.getComputedStyle(e).getPropertyValue(rule)) !== 0
  })
  return elements
}

如何修改此函数以便我也可以获取此computedValue的值？（例如30px）？

Answer 1

如果您想获得Array个计算值，那么您可以像这样修改您的函数：

function getCssByRule(rule) {
  const values = Array.from(document.querySelectorAll('*'))
    .filter(e => parseInt(window.getComputedStyle(e).getPropertyValue(rule)) !== 0)
    .map(e => window.getComputedStyle(e).getPropertyValue(rule));

  return values;
}

console.log(getCssByRule('margin-left'));

<div style="margin-left: 20px"></div>
<div style="margin-left: 19px"></div>
<div></div>
<div style="margin-left: 18px"></div>

Answer 2

我首先映射元素，然后使用您的规则过滤它们。这样你只需要getComputedStyle一次。下面将返回element => value对

的对象数组

function getCssByRule(rule) {
  return Array.from(document.querySelectorAll('*')).map(element =>
    ({
      element,
      value: window.getComputedStyle(element).getPropertyValue(rule)
    })
  ).filter(e => parseInt(e.value) !== 0);
}

console.log(getCssByRule('margin-left'));

<div>
  Foo
</div>
<div id="foo" style="margin-left:10px">
  Bar
</div>

如何从HTML元素中提取计算出的样式值？

2 个答案: