Diário de bordo #6
Ana Luisa Santos
Posted on January 17, 2023
classList
É uma propriedade do JavaScript que funciona como uma alternativa para acessar a lista de classes CSS de um elemento.
Sintaxe
const html = document.documentElement
html.classList.toggle('bg-black')
Neste exemplo de sintaxe que estou utilizando funciona da seguinte forma:
- A declaração da varíavel HTML recebe o retorno do elemento de um documento
- Faço a chamada dessa váriavel atribuindo a ela a propriedade classList que irá ser responsável por realizar a leitura da classe CSS
bg-black
e otoggle
que é usado para alternar entre o estado do nosso elemento HTML, inserindo nossa classe CSS como parâmetro e fazendo essa mudança em nosso documento HTML.
Observação: A classList é uma propriedade read-only, ou seja, ela apenas faz a leitura das classes CSS. Mas ela tem compatibilidade com os metodos abaixo na qual você consegue adicionar, remover ou alterar essas classes CSS:
add();
// Adiciona um ou mais tokens à lista
contains();
// Retorna verdadeiro se a lista contiver uma classe
remove();
// Remove um ou mais tokens da lista
length();
// Retorna o número de tokens na lista
replace();
// Substitui um token na lista
toggle();
// Alterna entre tokens na lista
value;
// Retorna a lista de tokens como uma string
values();
// Retorna um Iterator com os valores da lista
forEach();
// Executa uma função de retorno de chamada para cada token na lista
entries();
// Retorna um Iterator com pares chave/valor da lista
supports();
// Retorna verdadeiro se um token for um dos tokens suportados por um atributo
keys();
// Retorna um Iterator com as chaves da lista
item();
// Retorna o token em um índice especificado
💖 💪 🙅 🚩
Ana Luisa Santos
Posted on January 17, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.