Como pasa el tamaño de un texto css en pixeles a porcentaje usando javascript?

YeltsinReyes · 14 Feb 2019

Hola, me gustaría saber como puedo pasar pixeles a porcentaje en el font-size de css usando javascript?

por ejemlo si tengo font-size: 30px; cuanto seria este 30px en porcentaje % ??

Saludos!

oscarcweb · 18 Feb 2019

No existe la forma de equiparar los px a % por defecto, pero tu puedes definir que son x px a x %. Podrías hacerlo así:

Digamos que en este ejemplo 120px va a ser el 100%, pues si quisieras saber a que equivale 30px, tendrías que hacer: 30 * 100 / 120 y esto es igual a 25 por lo que 30px es el 25%.

Una vez tienes esto, solo con js buscar y remplazar valores, hay muchos ejemplos por google 🙂

Saludos

zcriptz · 6 Mar 2019

Depende del font-size del elemento padre.

Demo:

HTML:

<div style="font-size:12px">
	<div style="font-size:30px">texto 1</div>
	<div style="font-size:250%">texto 2</div>
</div>

250% de 12 es 30.

Insertar CODE, HTML o PHP:

<script>
function fontPorcent(e){
	return parseFloat(e.style.fontSize) / parseFloat(e.parentNode.style.fontSize) * 100;
}
</script>

- - - Actualizado - - -

Ejemplo:

Insertar CODE, HTML o PHP:

fontPorcent(document.getElementById('ID_DEL_ELEMENTO'))

Devolverá el porcentaje. (sin %)

Como pasa el tamaño de un texto css en pixeles a porcentaje usando javascript?

YeltsinReyes

oscarcweb

zcriptz

Temas similares