recherche

Maison  >  Article  >  interface Web  >  Comment changer la couleur de la page actuelle dans JS

Comment changer la couleur de la page actuelle dans JS

php中世界最好的语言
php中世界最好的语言original
2018-03-17 14:31:262430parcourir

Cette fois je vais vous montrer comment changer la couleur de la page courante avec JS. Quelles sont les précautions pour changer la couleur de la page courante avec JS Voici un cas pratique, prenons. un regard.

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer dynamiquement des balises et définir des attributs avec js

Utiliser JS pour effectuer des calculs

Comment utiliser la méthode Array filter() en JS

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：js génère aléatoirement des nombres aléatoires à 6 chiffresArticle suivant：js génère aléatoirement des nombres aléatoires à 6 chiffres

Articles Liés

Voir plus