search

mgrubinger / blog

https://www.grooovinger.com/
MIT License
0 stars 0 forks source link

Group all DOM elements by font-size #26

Open mgrubinger opened 1 year ago

mgrubinger commented 1 year ago

date: '2021-04-09' short: Debug the distribution of font-size of DOM elements on the page

Group all elements on the current page by their font size:

let elementsBySize = [];
[...$$('body *')].forEach(el => {
  let fontSize = window.getComputedStyle(el).fontSize;
  if(!elementsBySize[fontSize]) elementsBySize[fontSize] = [];
  elementsBySize[fontSize].push(el)
});

elementsBySize now contains an array with key: font size and value of an array containing all the elements with that font size.

Note: this only works in the chrome(ium) devtools, since it uses the $$ syntax. You can replace it with document.querySelectorAll('*')