Méthode JavaScript pour modifier l'arrière-plan d'une page Web et les compétences color_javascript de la police-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Méthode JavaScript pour modifier l'arrière-plan d'une page Web et les compétences color_javascript de la police

May 16, 2016 pm 04:16 PM

javascript 字体颜色方法更改网页背景

L'exemple de cet article décrit comment utiliser JavaScript pour modifier la couleur d'arrière-plan et de police d'une page Web. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

JavaScript, changez la couleur de l'arrière-plan et de la police de la page Web en cliquant sur le bouton. Il y a N boutons pour changer la couleur de la page Web. En cliquant sur différents boutons, la police et l'arrière-plan de la page Web seront différents. couleurs. Une applet JavaScript très simple.

1. Objectifs de base

Lors de l'ouverture de la page Web, le premier message de bienvenue "Bonjour" sera affiché

Il y a N boutons qui changent de couleur dans la page Web. Retour est la couleur par défaut pour revenir à 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 prendront des couleurs différentes.

A l’origine je voulais faire un effet 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 identifiants à la balise body et à la police js afin qu'elles puissent être contrôlées dans js. Cet exemple fournit l'application de la fonction js.

3. Processus de production

Juste une simple petite page, veuillez consulter les notes pour plus de détails :

Copier le code Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <tête>            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />                                                    <script type="text/javascript">                                                           //onload est équivalent au constructeur de cette page web, onunload est équivalent à la fonction de disjonction de cette page web
fonction charger() {
alert("Bonjour!");
}
fonction décharger() {
alert("Au revoir!");
}
function Changecolor(bcolor, fcolor) {
//Équivalent à la police <span style="color: fcolor transmis"> De cette façon, la couleur de la police est modifiée
Document.getElementById("body").style.background = bcolor
Document.getElementById("ziti").style.color = fcolor
}
</script> </tête>  <body onload="load()" onunload="unload()" id="body">                                                                                                                                                                                            <input onclick="Changecolor('#ff0000','#ffffff')" type="bouton"
à travers             <input onclick="Changecolor('#ff9900','#ffffff')" type="bouton"
              value="orange" />             <input onclick="Changecolor('#ffff00','#000000')" type="bouton"
                 value="jaune" />                                                …                                                                    <input onclick="Changecolor('#ffffff','#000000')" type="bouton"
   value="return" /> </corps> </html>

La fonction onunload() n'est presque efficace que lorsque IE ferme cette page, et cette boîte de dialogue ne sera pas sur le front-end, et Google Chrome n'aura aucun effet. Cette fonction n’a donc pas beaucoup de sens.

Les amis intéressés par les techniques de manipulation des couleurs js peuvent également se référer aux outils en ligne :

Générateur de codage couleur RVB

Outil de correspondance des couleurs Web en ligne

Comparaison des requêtes de couleurs RVB table_color code table_complete Nom anglais des couleurs

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration de ce site Web

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