Created
August 10, 2022 18:35
-
-
Save rodrigophpweb/77ac7fbe54374f389d3948d72fad47e9 to your computer and use it in GitHub Desktop.
Manipulando a classes através da propriedade classList e seus metódos.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Utilização do classList</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| padding: 10vh | |
| } | |
| button { | |
| background: #000; | |
| color: #fff; | |
| padding: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-bottom: 20px; | |
| } | |
| section { | |
| background-color: orangered; | |
| padding: 20px; | |
| color: white; | |
| display: none; | |
| } | |
| section.orange { | |
| background-color: orange; | |
| color: black; | |
| display: block; | |
| } | |
| section h2 { | |
| margin-bottom: 20px; | |
| } | |
| .active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Botões para manipulação --> | |
| <button>Manipulador</button> | |
| <button>Trocar cor</button> | |
| <!-- Sessão com conteúdo --> | |
| <section class="active"> | |
| <h2>Trabalhando com o método classList do JavaScript</h2> | |
| </section> | |
| <script> | |
| // Armazendo os elementos HTML em variáveis | |
| const button = document.getElementsByTagName('button')[0] | |
| const changeColor = document.getElementsByTagName('button')[1] | |
| const section = document.querySelector('section') | |
| // Adicionando evento de click para o botão de manipulação | |
| button.addEventListener('click', () => { | |
| /* | |
| A instrução abaixo adiciona a classe active | |
| section.classList.add('active') | |
| */ | |
| /*A instrução abaixo remove a classe active | |
| section.classList.remove('active') | |
| */ | |
| /*A instrução abaixo alterna a classe active | |
| section.classList.toggle('active')*/ | |
| }) | |
| // Adicionando evento de click para o botão de troca de cor | |
| changeColor.addEventListener('click', () => { | |
| section.classList.replace('active', 'orange') | |
| section.classList.toggle('orange') | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment