Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 28
Tutorial para Alterar a Cor de Fundo da Página

Neste tutorial veremos como alterar a cor de fundo de uma página Web. Para isso, utilizaremos três arquivos separados:
HTML
JavaScript
CSS
Você deverá executar o arquivo HTML. e este, por sua vez chamará os outros. Você deve colocar os arquivos no mesmo diretório
Vejamos entao um exemplo de código para alterar a cor de fundo de uma página mediane o pressionamento de um botão:
Arquivo HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="shortcut icon" type="image/png" href="color.png" /> <link rel="stylesheet" href="style.css"> <title>Altera Cor de Fundo da Página</title> <script src='/google_analytics_auto.js'></script></head> <body> <div class="container"> <button id="submit" type="button" class="btn btn-outline-dark">Clique Aqui</button> </div> <script src="script.js"></script> </body> </html>
Arquivo JavaScript:
var colors = ["Orangered","Blue","Yellow","Green","Orange", "Cyan","DodgerBlue", "Violet", "Navy", "Purple", "YellowGreen", "OrangeRed", "SlateBlue", "Salmon", "Crimson", "HotPink", "Magenta"]; var index = 0; document.querySelector("#submit").addEventListener("click", () => { if(index > colors.length - 1) index = 0; document.body.style.backgroundColor = colors[index++]; });
Arquivo CSS:
.container { display: flex; align-items: center; justify-content: center; height: 100vh; }
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Relógio Analógico
Tutorial para Gerar Cores Gradientes para o Fundo da Página >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino