How to choose the units returned by a .getPropertyValue("text-size") ; JS query-CodePudding

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.

CodePudding user response：

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)   "%" ;
}