2

I want the font-size of an element in a relative value; i.e: "140%", or, alternatively: "smaller".

When I run the code shown it returns: "22.4px".

Can anyone show how to extract a relative value or how to use the absolute value to calculate a relative value to return to the CSS/HTML?

<html>
    <head>
        <style>
            #text {
               font-size: 140% ;
            }
        </style>
    </head>
    <body>
        <section id="text">
             Sample text sample text sample text
        </section>
        <script>
           var o = document.getElementById("text") ;
           var a = window.getComputedStyle(o) ;
           var i = a.getPropertyValue("font-size") ;
           if(i == "140") { //or, 140%, or any other qualitative value, really
                o.style.fontSize = (i - 30) + "%" ;
           }
        </script>
   </body>
</html>

I'm aware that in the snippet shown, there are much more elegant ways to get the outcome I described, but I choose to show the minimum example because where I'm trying to implement it has a lot of "noise" that I've already confirmed is not the problem.

Esdeseserdt
  • 181
  • 10

1 Answers1

2

Try to convert font size to relative value as follows

const o = document.getElementById("text") ;
const a = window.getComputedStyle(o) ;
const i = parseFloat(a.getPropertyValue("font-size").match(/[\d\.]+/)[0]) ;

const fontScale = (i * 100) / 16; // 16px is a base font
if(fontScale === 140) { //or, 140%, or any other qualitative value, really
  o.style.fontSize = (fontScale - 30) + "%" ;
}
Volodymyr Sen
  • 93
  • 5
  • Could you explain the '16px ia a base font' part - what if the em (or rem) size has been changed? I just don't understand how you can get the % value this way. – A Haworth Sep 30 '21 at 22:04
  • 1
    The default browser font-size is 16px until you change it. Which is equal 1rem, the rem value never changes. From the other side getPropertyValue("font-size") always returns pixels. In your case "22.4px" which is 140% from 16px. So if you want to convert px back to percent you will need to calculate scale as (sizeInPixels * 100) / 16, which returns 140 Then you can validate number to number and decide what to do next – Volodymyr Sen Sep 30 '21 at 22:27
  • I agree that normally the default browser font size is 16px (I think by tradition rather than by standard) but the user can change it within the browser settings so you can't assume 16px. If I keep Edge at the medium setting I get 22.4px but if I set it to 'large' I get 28px for example. – A Haworth Sep 30 '21 at 22:50
  • you can always get the default browser font-size https://stackoverflow.com/questions/1442542/how-can-i-get-default-font-size-in-pixels-by-using-javascript-or-jquery/4530334 – Volodymyr Sen Sep 30 '21 at 22:54
  • 2
    That's a useful link, thanks (though some of the answers are a bit dodgy the most recent is good). I think if you used the computed style font-size of the html element rather than 16 in your answer it would be safer. It would answer the question as it has been posed, though not deal with more complex cases but I guess they aren't needed here. – A Haworth Sep 30 '21 at 23:03