Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

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

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

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.

<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!

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal