Vanilla Javascript - Alterando CSS pelo Javascript
24/10/2024No tutorial de hoje aprenderemos como alterar o CSS de um site dinamicamente através do Javascript para deixar o site mais interativo.
Editar CSS pelo JS
Para esse tutorial criaremos três arquivos:
- index.html
- javascript.js
- style.css
index.html
Na linguagem de marcação faremos o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content" data-toggle="false"></div>
<button data-color="red">Alterar Vermelho</button>
<button data-color="green">Alterar Verde</button>
<button data-color="blue">Alterar Azul</button>
<script src="javascript.js"></script>
</body>
</html>style.css
No CSS faremos apenas um estilização básica para testarmos:
*{margin:0;padding:0;box-sizing: border-box;}
.content{
width: 100%;
height: 200px;
background: black;
}javascript.js
No JS, pegaremos os botões do HTML e atribuiremos cores a div content, demonstrando a alteração dinâmica do CSS:
(function(win,doc){
'use strict';
let divContent = doc.querySelector('.content');
let buttons = doc.querySelectorAll('button');
for(let i=0; i{
let colorButton = e.target.dataset.color;
if(divContent.dataset.toggle == "false"){
divContent.style.background = colorButton;
divContent.style.borderRadius = '100%';
divContent.style.marginTop = '150px';
divContent.dataset.toggle = "true";
}else{
divContent.style.background = colorButton;
divContent.style.borderRadius = 0;
divContent.style.marginTop = 0;
divContent.dataset.toggle = "false";
}
});
}
/*doc.querySelector('button').addEventListener('click',()=>{
divContent.style.background = 'red';
})*/
})(window,document) Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!
Precisa de ajuda na criação do seu site? webdesignemfoco@gmail.com
Se o seu olho direito o fizer pecar, arranque-o e lance-o fora. É melhor perder uma parte do seu corpo do que ser todo ele lançado no inferno. Mateus 5:29
Posts Relacionados
