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