Comment puis-je changer la taille des caractères à la volée avec les feuilles de style?

Les développeurs Web changent les propriétés de police du texte d'un site Web en modifiant les valeurs de style de la feuille de l'objet de texte lorsque les téléspectateurs effectuent une action sur une page Web. Par exemple, si un site a un bouton qui dit, "Cliquez pour augmenter la taille de police," en cliquant sur ce bouton appelle une fonction JavaScript. Cette fonction permet de changer la taille des caractères d'un objet texte en mettant à jour la propriété de taille de police de l'objet. Utilisez cette technique pour ajouter des effets de texte à un site Web et permettre aux téléspectateurs de personnaliser le texte en fonction de leurs besoins.

Instructions

1 Ouvrez le Bloc-notes, créez un nouveau document et ajouter le texte suivant à elle:

<! 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">

<Head>

<Title> Font Changer Test </ title>

<! - Section HEAD du document ->

<Script type = "text / javascript">

// Section SCRIPT du Document ->

</ Script>

</ Head>

<Body>

<! - Section BODY du document ->

</ Body>

</ Html>

2 Ajoutez le code suivant à la section <body> du document "section BODY du document" ci-dessous:

<Type entrée = valeur "bouton" = "Regular" onclick = "changeFont ( 'de paragraphe 1', 'regularFont')" />

<Type entrée = valeur "bouton" = "Grandes polices" onclick = "changeFont ( 'paragraphe 1', 'largeFont')" />

<Input type = "button" value = "Small Font" onclick = "changeFont ( 'paragraphe 1', 'smallFont')" />

<Div>

<P id = classe "paragraphe 1" = "regularFont"> Ceci est un paragraphe. Cliquez sur un bouton pour le redimensionner. </ P>

</ Div>

Cela crée un paragraphe et trois boutons qui appellent la fonction JavaScript qui change la taille de police du paragraphe. événement "onclick" Chaque bouton transmet le nom d'une classe différente. Chaque styles de classe du paragraphe selon la définition de classe «feuille de style.

3 Ajouter ce code à la section <head> du document "de la section HEAD du document" ci-dessous:

<Style type = "text / css">

.regularFont {font-size: 12px;}

.smallFont {font-size: 8px;}

.largeFont {font-size: 24px;}

</ Style>

Ces classes de style de feuille définissent tailles régulières, petites et grandes polices. Les valeurs sont en pixels. La classe "largeFont" définit une taille de police de 24 pixels. Changez ces tailles de pixels pour toutes les valeurs que vous aimez. Par exemple, pour changer la taille de la police de la classe "largeFont" 20 pixels, modifiez l'instruction comme suit:

.largeFont {font-size: 20px;}

4 Ajouter cette fonction JavaScript à la balise <script> section du document "section SCRIPT du document" ci-dessous:

fonction changeFont (objectReference, newClassName) {

var objectToChange = document.getElementById (objectReference);

objectToChange.className = newClassName;

}

Chaque bouton dans la section <body> appelle cette fonction et passe deux paramètres à la fonction: le nom de l'objet pour changer et le nom de la classe à appliquer à l'objet. Dans cet exemple, le bouton "Large Police" passe "paragraphe 1" comme "objectToChange" et "largeFont" comme le nom de la classe à appliquer à «paragraphe 1». La deuxième déclaration dans la fonction applique la classe «largeFont» à «paragraphe 1». Depuis la classe "largeFont" définit une taille de 24 pixels de la police (24px), la taille de la police de "PARAGRAPH1" passe à 24 pixels.

5 Cliquez sur "Fichier" et sélectionnez "Enregistrer" pour ouvrir le "Enregistrer sous" fenêtre. Entrez le suivant dans la case "Nom de fichier":

xyz.html

Remplacer "xyz" avec un nom quelconque. Par exemple, si vous souhaitez nommer la page Web "MyPage," enter "mapage.html" (sans les guillemets) dans la zone de texte.

6 Cliquez sur "Enregistrer" pour enregistrer le fichier. Ouvrez-le dans un navigateur et cliquez sur les boutons. Chaque bouton va changer la taille du texte dans le paragraphe.

Conseils et avertissements

  • Toujours ajouter une propriété ID à tout objet HTML que vous souhaitez activer pour modifier. La commande "document.getElementById" utilise l'ID pour rendre l'objet visible dans le code JavaScript.