Maison > Article > interface Web > Comment changer la couleur d'une page en JS (tutoriel détaillé)

Comment changer la couleur d'une page en JS (tutoriel détaillé)

亚连original: 2018-06-04 17:26:204643parcourir

Cet article est une petite compétence de production de pages Web utilisant JS. Il est utilisé dans de nombreux endroits. Il peut changer la couleur des pages HTML via JS. Si vous êtes intéressé, apprenez-le.

Jetons d'abord un coup d'œil aux rendus de démonstration spécifiques

Ce qui suit est le code complet de la page HTML, vous pouvez le tester.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <style> 
    .big_box{ 
      width: 500px; 
      height: 500px; 
      border: 1px solid black; 
    } 
    .big_box input{ 
      margin-left: 60px; 
    } 
  </style> 
  <script> 
    function Change_red(){ 
      var Red=document.getElementById("change_style"); 
      Red.style.backgroundColor="red"; 
    } 
    function Change_blue(){ 
      var Blue=document.getElementById("change_style"); 
      Blue.style.backgroundColor="blue"; 
    } 
    function Change_green(){ 
      var Green=document.getElementById("change_style"); 
      Green.style.backgroundColor="green"; 
    } 
  </script> 
</head> 
<body> 
  <p class="big_box" id="change_style"> 
    <input type="button" value="变为红色" onclick="Change_red()"> 
    <input type="button" value="变为蓝色" onclick="Change_blue()"> 
    <input type="button" value="变为绿色" onclick="Change_green()"> 
  </p> 
</body> 
</html>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus