Quiero el tamaño de fuente de un elemento en un valor relativo; es decir: "140%", o alternativamente: "menor".
Cuando ejecuto el código que se muestra, devuelve: "22.4px".
¿Alguien puede mostrar cómo extraer un valor relativo o cómo usar el valor absoluto para calcular un valor relativo para volver a 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>Soy consciente de que en el fragmento que se muestra, hay formas mucho más elegantes de obtener el resultado que describí, pero elijo mostrar el ejemplo mínimo porque donde estoy tratando de implementarlo tiene mucho "ruido". Ya he confirmado que no es el problema.
Intente convertir el tamaño de fuente a un valor relativo de la siguiente manera
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) + "%" ; }