Maison > Article > interface Web > JS implémente le code de changement de couleur de la page

JS implémente le code de changement de couleur de la page

小云云original: 2018-02-26 09:18:331666parcourir

Cet article partagera avec vous une petite astuce de production de pages Web JS, qui est utilisée dans de nombreux endroits. Vous pouvez changer la couleur de la page HTML via JS. Si vous souhaitez apprendre, j'espère que cela pourra aider tout le monde.

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Boîtes de message couramment utilisées dans JSArticle suivant：Boîtes de message couramment utilisées dans JS

Articles Liés

Voir plus