CSSJAVASCRIPT

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

18 abr. 2018|Lectura de 2 minutos

En este ejercicio te explicaré como manipular variables CSS con JavaScript para aumentar o disminuir el tamaño de fuente.

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.

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

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

:root {
  --font-size: 1;
}

body {
  font-size: calc(var(--font-size) * 1em)
}

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

const getFontSize = () =>
  getComputedStyle(document.documentElement)
    .getPropertyValue('--font-size')

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.

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

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

const fontUp = element => {
  // escuchamos los clicks del elemento
  element.addEventListener('click', () => {
    // obtenemos el valor de la variable CSS
    let fontSize = getFontSize()
    // aumentamos el valor de esa variable en 1.1
    document.documentElement
      .style.setProperty('--font-size', `${fontSize * 1.1}`)
  })
}
const fontDown = element => {
  // escuchamos los clicks del elemento
  element.addEventListener('click', () => {
    // obtenemos el valor de la variable CSS
    let fontSize = getFontSize()0
    // disminuimos el valor de esa variable en 0.9
    document.documentElement
      .style.setProperty('--font-size', `${fontSize * 0.9}`)
  })
}

Ahora solo resta ejecutar las dos funciones anteriores

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

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!