Cet article décrit la méthode JavaScript pour modifier l'arrière-plan et la couleur de la police de la page Web. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
JavaScript, en cliquant sur le bouton pour modifier la couleur de l'arrière-plan et de la police de la page Web. Il n'y a n boutons pour modifier la couleur de la page Web. En cliquant sur différents boutons, la police et l'arrière-plan de la page Web passeront à différentes couleurs. Applet JavaScript très simple.
1. Objectifs de base
Dès que vous ouvrez la page Web, vous inviterez d'abord le message de salutation "bonjour"
Il n'y a pas de boutons pour modifier la couleur de la page Web, où le retour est la couleur par défaut de la page Web, l'arrière-plan est blanc et la police est noire.
Cliquez sur différents boutons, et la police et l'arrière-plan de la page Web passeront à différentes couleurs.
Je voulais à l'origine faire une amélioration de l'arc-en-ciel, mais le principe est exactement le même, donc je n'écrirai pas plus de boutons.
2. Idées de base
La clé est de fournir des ID pour les étiquettes corporelles et les polices JS afin qu'elles puissent être contrôlées en JS. Cet exemple fournit une application aux fonctions JS.
3. Processus de production
Juste une simple petite page, veuillez consulter les commentaires pour plus de détails:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> JS Modifier la couleur d'arrière-plan </TITAL>
<! - Ce paragraphe peut également être séparé en un fichier JS, mais ce code est trop court, donc il n'y a pas besoin ->
<script type = "text / javascript">
// Onload est équivalent au constructeur de cette page Web, et onUnload est équivalent à la fonction de disjonction de cette page Web
Fonction Load () {
alert ("Bonjour!");
}
fonction un chargement () {
alerte ("Au revoir!");
}
fonction changeColor (bcolor, fcolor) {
// Équivalent à la modification de la couleur de la police pour la police <span style = "Color: passée fcolor">
document.getElementById ("Body"). Style.Background = bcolor;
document.getElementById ("ziti"). style.color = fcolor;
}
</cript>
</ head>
<! - La clé est de fournir un identifiant pour toute la page Web et les polices de ligne. La méthode GetElementById () dans JS peut facilement contrôler les choses dans CSS ->
<body onload = "losh ()" onunload = "unload ()" id = "body">
<span id = "ziti"> js </span>
<br />
<! - Notez que lorsque vous passez des paramètres en double citation, les doubles citations d'origine deviendront des devis simples. La valeur d'Onclick est quelque chose qui sera déclenché une fois ce bouton cliqué->
<entrée onclick = "ChangEColor ('# ff0000', '# ffffff')" type = "bouton"
value = "red" />
<entrée onclick = "ChangEColor ('# ff9900', '# ffffff')" type = "bouton"
value = "orange" />
<entrée onclick = "ChangEColor ('# ffff00', '# 000000')" type = "bouton"
Value = "Yellow" />
...
<entrée onclick = "ChangEColor ('# ffffff', '# 000000')" type = "bouton"
value = "return" />
</docy>
</html>
La fonction onUnload () n'est presque valide que lorsque IE ferme cette page, et cette boîte de dialogue ne sera pas dans l'avant, et Google Chrome n'a aucun effet. Par conséquent, cette fonction a peu de signification.
Les amis qui s'intéressent aux compétences en fonctionnement des couleurs JS peuvent également se référer à l'outil en ligne:
Générateur de codage de couleur RVB
Outil de correspondance de couleur Web en ligne
Table de comparaison de la requête de couleur RVB_Color Table_colour Collection de noms anglais
J'espère que cet article sera utile à la programmation JavaScript de tous.