Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida sobre a relação data-attribute e classe.

Boa Noite,

Estou com uma dúvida referente a esse recurso do data-attribute. Tudo que aprendi até o momento em relação a essa integração do Java Script com html, foi através da utilização de classes ou Ids no Query Selector.

Dentro disso, quando tínhamos que alterar algum conteúdo de texto ou aplicar alguma mudança no visual da página diante de alguma interação, utilizamos o 'classList".

Minha pergunta é: quando eu puxo um elemento do html pro java através de um data-attribute, o recurso classList pode ser utilizado, por exemplo, para mudar a cor de um texto a partir de uma interação em uma página da web?

1 resposta
solução!

Oi estudante, tudo bem?

Desculpe a demora em retornar.

Ótima pergunta! Sim, você pode utilizar o classList para alterar a classe de um elemento que foi selecionado através de um data-attribute.

Um exemplo seria: considere que você tenha um botão em seu HTML que possui um data-attribute chamado "data-texto". Você pode selecionar esse botão utilizando o querySelector e, em seguida, utilizar o classList para adicionar ou remover uma classe que irá alterar a cor do texto.

Veja esse exemplo:

<button data-texto="exemplo">Clica aqui</button>
const botao = document.querySelector('[data-texto="exemplo"]');
  botao.addEventListener('click', function() {
 const texto = document.querySelector('.texto');
  texto.classList.add('vermelho');
});

Nesse exemplo, quando o botão é clicado, a classe "vermelho" é adicionada ao elemento com a classe "texto", mudando a cor do texto para vermelho.

Um abraço e bons estudos.