3

I'm trying to parse a web page (any web page actually) and dynamically apply some adjustments to font sizes of DOM elements.

As far as I could see:

  • element.style.fontSize will return the value plus unit, e.g.: "11px", or "1em", or "1rem", which is fine for me, BUT...
  • element.style.fontSize will return no value if the font size is defined via a css class. So if I want to address all DOM elements (most of which won't have their font-size defined in their style attribute), I'll have to use getComputedStyle instead, BUT...
  • getComputedStyle seems to return all font sizes in px, even if it was originally defined in em or rem in the css, e.g.: font size defined as "1rem" => getComputedStyle returns "16px" instead.

For my purpose, I'd like to know the original font-size value with its original unit, so get "1rem" rather than "16px". Is it possible?

Denis
  • 49
  • 3
  • 1
    https://stackoverflow.com/questions/9730612/get-element-css-property-width-height-value-as-it-was-set-in-percent-em-px-et Please have a look at this one. – Tinu Jos K Dec 15 '19 at 21:44
  • [Only works in Chrome..](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap#Browser_compatibility) – Matt Oestreich Dec 15 '19 at 22:10

1 Answers1

-1

If you're trying to dynamically adjust font sizes, then .style.fontSize is the way to go. This is due to the fact that inline styles have a much higher level of specificity, so your changes will override any styles that may be present in the stylesheet.

.getComputedStyle() returns the CSS value after "after applying active stylesheets and resolving any basic computation those values may contain". That means that the rem is taken into account and adjusted accordingly. Having said this, if you need to target based on existing values set in the stylesheet, I think .getComputedStyle() is the best bet. The fact that it shows the calculated value shouldn't make a difference; you're still able to manipulate 'changes' after the conversion -- and you can even convert back if need be.

Either way, you'll need to set the property with .style.fontSize.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • I kinda like this answer... Since only [Chrome supports computedStyleMap()](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap#Browser_compatibility) - outside of writing some hacky function yourself - why does it matter what the font-size was set in? If you can convert that value to `px` regardless how it was set - that should be good enough... – Matt Oestreich Dec 15 '19 at 22:14
  • Actually, I first thought I could handle px as well. BUT: Suppose you're parsing nested elements. Starting with the first element, say you increase the font size by 20%. Fine. Then you get to a child element. Its font size is defined in em, but you don't know it. So you also increase its font size by 20% The trouble is: as soon as you had increased its parent's font size by 20%, the child's relative font size was also increased by 20%. So finally, you increased the child's font size by 44% instead of 20%. And it only gets worse then. Or maybe I'm doing something wrong? – Denis Dec 16 '19 at 08:24
  • I finally changed my approach. Instead of parsing once, I parse twice. 1. I store all text elements and their original (computed) font sizes, in pixels. 2. Once the first loop is completed, I loop again and then adjust font sizes. It's the best way I've found to address both relative & absolute font sizes, without knowing which. – Denis Dec 17 '19 at 21:11