Maison >interface Web >js tutoriel >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:204770parcourir

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 connexes :

Comment utiliser ngrok+express pour résoudre les problèmes de débogage de l'interface WeChat

Comment utiliser les tables element-ui pour implémenter la fonctionnalité cellulaire Modifier

Comment utiliser vue-cli pour écrire un plug-in vue

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