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

Question

我正在使用以下函数获取具有特定计算样式的所有 HTML 元素。例如，getCssByRule('margin-left') 将生成一个数组，其中包含页面中具有剩余边距的所有元素。

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

如何修改此函数以便我也可以获得此计算值的值？ (例如 30px)？

Answer 1

如果你想获得计算值的数组，那么你可以像这样修改你的函数:

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>