Cómo aumentar y disminuir el tamaño de fuente con Variables CSS y JavaScript

Las variables CSS son geniales porque existen en el DOM, lo que signifca que podemos acceder a ellas con JavaScript y manipularlas. Para demostrarlo, te explicaré como aumentar y disminuir el tamaño de fuente utilizando variables CSS y JavaScript, es muy sencillo.

1. Necesitamos dos botones que al pulsarlos aumenten o disminuyan el tamaño de fuente.

1<div id="font-up">A<sup>+</a></div>
2<div id="font-down">A<sup>-</a></div>
3

2. Definimos el tamaño de fuente con variables CSS

1:root {
2  --font-size: 1;
3}
4
5body {
6  font-size: calc(var(--font-size) * 1em)
7}
8

Recomendado: Curso Variables CSS

Como vemos, la variable CSS --font-size tiene un valor numérico, lo que nos permitirá fácilmente manipularla con JavaScript. Y usando la función calc() convertimos este número a em.

3. Leer el valor de la variable CSS

1const getFontSize = () =>
2  getComputedStyle(document.documentElement)
3    .getPropertyValue('--font-size')
4

Esta función nos retorna el valor de la variable CSS --font-size cada vez que la llamemos. Puesto que este valor irá cambiando, usaremos esta funcion en cada click a los botones. Sin embargo, retorna un string y tenemos que convertirlo el resultado a número.

1const getFontSize = () =>
2  parseFloat(getComputedStyle(document.documentElement)
3    .getPropertyValue('--font-size'))
4

4. Funciones para aumentar y disminuir el tamaño de fuente

1const fontUp = element => {
2  // escuchamos los clicks del elemento
3  element.addEventListener('click', () => {
4    // obtenemos el valor de la variable CSS
5    let fontSize = getFontSize()
6    // aumentamos el valor de esa variable en 1.1
7    document.documentElement
8      .style.setProperty('--font-size', `${fontSize * 1.1}`)
9  })
10}
11

1const fontDown = element => {
2  // escuchamos los clicks del elemento
3  element.addEventListener('click', () => {
4    // obtenemos el valor de la variable CSS
5    let fontSize = getFontSize()0
6    // disminuimos el valor de esa variable en 0.9
7    document.documentElement
8      .style.setProperty('--font-size', `${fontSize * 0.9}`)
9  })
10}
11

Ahora solo resta ejecutar las dos funciones anteriores

1fontUp(document.getElementById('font-up'))
2fontDown(document.getElementById('font-down'))
3

Miralo en acción:

See the Pen Aumentar y disminuir tamaño de fuente con JavaScript by Alvaro Felipe (@AlvaroFelipe) on CodePen.

También he grabado este ejercicio en video

Si quieres saber más de variables CSS tenemos un curso en EDteam. ¡Nos vemos en clases!