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

Question

I'm using the following function to get all the HTML elements with a certain computedStyle. FOr example getCssByRule('margin-left') will produce an array with all the elements in the page that have margin left.

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

How to modify this function so I can also get the value of this computedValue? (eg 30px )?

Answer 1

If you want to get an Array of computed values, then you can modify your function like this:

 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

I'd first map over the elements, then filter them using your rule. That way you'll need to getComputedStyle only once. Below will return an array of objects with element => value pairs

 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>