Olá pessoal! Neste tutorial vamos aprender como manipular elementos com JavaScript em uma página HTML utilizando CSS e JS.
Antes de começarmos, certifique-se de que você tem um editor de código instalado no seu computador, como o Visual Studio Code, por exemplo.
Vamos começar criando um arquivo HTML simples com um parágrafo e um botão que irá alterar o texto desse parágrafo quando clicado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulando Elementos com JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#main-paragraph {
font-size: 1.2em;
color: #333;
}
#update-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Manipulando Elementos com JavaScript</h1>
<p id="main-paragraph">Clique no botão abaixo para alterar o texto deste parágrafo.</p>
<button id="update-button">Atualizar Texto</button>
<script>
// Adicionando um evento de clique ao botão
document.getElementById('update-button').addEventListener('click', function() {
document.getElementById('main-paragraph').innerText = 'Texto alterado com sucesso!';
});
</script>
</body>
</html>Neste exemplo, estamos criando um parágrafo com o id "main-paragraph" e um botão com o id "update-button". O JavaScript está sendo utilizado para adicionar um evento de clique ao botão que irá alterar o texto do parágrafo quando clicado.
Você pode adicionar mais funcionalidades ao seu código, como alterar o estilo do elemento, adicionar classes CSS dinamicamente, alterar atributos HTML, entre outras possibilidades.
Espero que este tutorial seja útil para você entender como manipular elementos com JavaScript em uma página HTML. Se tiver alguma dúvida, não hesite em deixar um comentário. Obrigado por acompanhar e até a próxima!
Gostei bastante dela
Construindo a Landing Page do Zero:
https://youtu.be/ShNPU2JyEkU
Deixando ela dinamica com JS:
https://youtu.be/JYvhBead3FU