Dado um documento HTML, a tarefa é alterar a cor de fundo do documento usando JavaScript e jQuery.

Abordagem 1: esta abordagem usa JavaScript para alterar a cor de fundo após clicar no botão.
Use a propriedade backgroundColor do estilo HTML DOM para alterar a cor do plano de fundo após clicar no botão. Esta propriedade é usada para definir a cor de fundo de um elemento.

Exemplo: Este exemplo muda a cor de fundo com a ajuda de JavaScript .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to change the background color
            after clicking the button ?
        </title>
    </head> 
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
          
        <p id = "GFG_UP" style =
            "font-size: 16px; font-weight: bold;">     
        </p>
          
        <button onclick = "gfg_Run()"> 
            Click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var str = "Click on button to change the background color";
          
            el_up.innerHTML = str;
          
            function changeColor(color) {
                document.body.style.background = color;
            }
              
            function gfg_Run() {
                changeColor('yellow');
                el_down.innerHTML = "Background Color changed";
            }         
        </script> 
    </body> 
</html>

Saída:

  • Antes de clicar no botão:
  • Após clicar no botão:

Abordagem 2: esta abordagem usa jQuery para alterar a cor de fundo após clicar no botão.

  • O método text() é usado para definir o conteúdo do texto para o elemento selecionado.
  • O método on() é usado como manipuladores de eventos para os elementos selecionados e elementos filho.
  • O método css() é usado para alterar / definir a cor de fundo do elemento.

Exemplo: Este exemplo muda a cor de fundo com a ajuda de JQuery .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to change the background color after
            clicking the button in jQuery ?
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
          
        <p id = "GFG_UP" style = 
            "font-size: 16px; font-weight: bold;">     
        </p>
          
        <button> 
            Click here
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to change the background color");
            $('button').on('click', function() {
                $('body').css('background', '#ccc');
                $('#GFG_DOWN').text("Background Color Changed!");
            }); 
        </script> 
    </body> 
</html>

Saída:

  • Antes de clicar no botão:
  • Após clicar no botão:

O JavaScript é mais conhecido para o desenvolvimento de páginas da web, mas também é usado em uma variedade de ambientes sem navegador. Você pode aprender JavaScript desde o início, seguindo este tutorial de JavaScript e exemplos de JavaScript .

jQuery é uma biblioteca JavaScript de código aberto que simplifica as interações entre um documento HTML / CSS. É amplamente conhecida por sua filosofia de “Escreva menos, faça mais” .
Você pode aprender jQuery desde o início, seguindo este Tutorial jQuery e Exemplos de jQuery .