Aplicação de estilização em JavaScript
Vamos fazer um botão que, ao ser clicado,
fará um elemento aparecer e desaparecer alternadamente.
Vamos deixar o elemento oculto por padrão (isso será implementado
usando display:
none), e ele aparecerá através da adição
da classe active. Esta classe será
adicionada e removida alternadamente usando classList.toggle:
html<button id="button">clique aqui</button>
<div id="elem"></div>css#elem {
display: none;
width: 200px;
height: 200px;
border: 1px solid green;
}
#elem.active {
display: block;
}javascriptlet button = document.querySelector('#button');
let elem = document.querySelector('#elem');
button.addEventListener('click', function() {
elem.classList.toggle('active');
});
Результат: