Le texte est l'actif le plus important et le plus visible de chaque application ou page Web. Sans l'utilisation de texte, le créateur ne peut pas transmettre pleinement ses pensées ou fournir des informations correctement. En raison de sa nécessité et de son importance, son style devient également un cauchemar pour la plupart des développeurs. Pour le texte statique, les propriétés CSS et son cadre aident beaucoup, mais il existe néanmoins un besoin pour une propriété qui puisse être appliquée au style de manière dynamique. Heureusement, cette propriété est fournie par JavaScript portant le nom « texteDécoration ».
Ce blog fournira la procédure pour appliquer des styles sur l'élément HTML via la propriété textDecoration.
Comment appliquer des styles à l’aide de la propriété textDecoration du style HTML DOM ?
Le style DOM” texteDécoration ' La propriété effectue essentiellement un style comme l'ajout de ' souligner', 'surligner', 'interligne' et 'clignoter' » sur un élément sélectionné. Cette propriété lorsqu'elle est définie sur ' aucun ' supprime le style par défaut qui est appliqué sur cet élément comme une balise d'ancrage.
Syntaxe
La syntaxe de la propriété textDecoration de style DOM est :
eleObj. style . texteDécoration = 'aucun|surlignage|clignoter|soulignement|initial|ligne|hériter'
Consultez le tableau ci-dessous pour avoir une idée rapide des valeurs qui peuvent être attribuées au « texteDécoration ' propriété:
| Valeur | Explication |
|---|---|
| aucun | Convertissez le texte au format brut en supprimant tout style prédéfini ; c'est la valeur par défaut. |
| surligner | Insère une ligne sur ou au-dessus du texte sélectionné. |
| clignoter | Fait clignoter le texte, mais il n'est pas pris en charge par tous les navigateurs Web. |
| souligner | Il place la ligne sous ou au bas du texte sélectionné. |
| initial | Définissez la propriété appliquée sur sa valeur par défaut qui n'est aucune dans notre cas. |
| ligne à travers | Placez la ligne au centre du texte, c'est-à-dire entre le texte. |
| tu hérites | Hérite de la propriété appliquée à l'élément racine ou parent. |
Examinons maintenant le processus de mise en œuvre et son effet sur le texte pour chaque valeur de « texteDécoration ' propriété.
Exemple 1 : propriété « textDecoration = none »
La mise en œuvre pratique du « texteDécoration « propriété ayant une valeur de » aucun » va être expliqué dans le code ci-dessous :
< corps >
< centre >
< h1 style = 'couleur : bleu cadet ;' > Linux < / h1 >
< bouton sur clic = 'Applicateur()' > Applicateur < / bouton >
< p > Lorsque la valeur de la propriété textDecoration est définie sur none : < / p >
< h3 identifiant = 'cas d'utilisation' style = 'texte-décoration : surligne ;' > Élément ciblé < / h3 >
< / centre >
< scénario >
fonction Applicateur() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / scénario >
< / corps >
Explication du code indiqué ci-dessus :
- Tout d’abord, utilisez un « < bouton >' pour créer un bouton et lui attribuer un écouteur d'événement de ' sur clic ». Cet écouteur d'événement déclenche une fonction JavaScript nommée « Applicateur ».
- Ensuite, créez un élément ciblé « h3 ' et attribuez-lui un identifiant unique de ' cas d'utilisation ». Appliquez également le CSS ' décoration de texte « propriété ayant une valeur de » surligner ' avec l'aide du ' style ' attribut.
- Maintenant, entrez le « Applicateur () » corps de la fonction et sélectionnez l’élément ciblé via son identifiant « cas d'utilisation ' et attachez le style ' texteDécoration ' propriété.
- Après cela, attribuez à la propriété une valeur de « aucun ' pour supprimer tout style de décoration de texte pré-appliqué sur l'élément.
La vue de la page web après l'exécution du code ci-dessus :
La sortie montre que le pré-style appliqué sur l'élément ciblé est supprimé en lui attribuant la valeur « aucun ».
Exemple 2 : Propriété « textDecoration = initial »
L'extrait de code ci-dessous illustre l'implémentation de ' texteDécoration ' propriété lorsque la valeur de ' initial » lui est attribué :
< scénario >fonction Applicateur ( ) {
document. getElementById ( 'cas d'utilisation' ) . style . texteDécoration = 'initial' ;
}
scénario >
La sortie générée après la compilation du code ci-dessus est présentée ci-dessous :
La sortie ci-dessus montre que la valeur de la décoration du texte est définie sur sa valeur par défaut qui est « aucun » et donc tout le pré-stylisme a été annulé.
Exemple 3 : Propriété « textDecoration = overline »
Le code ci-dessous montre la mise en œuvre pratique du « texteDécoration ' propriété lorsque la valeur de ' surligner » lui est fourni :
< corps >< centre >
< h1 style = 'couleur : bleu cadet ;' > Linux < / h1 >
< bouton sur clic = 'Applicateur()' > Applicateur < / bouton >
< p > Lorsque la valeur de la propriété textDecoration est définie sur surligne : < / p >
< h3 identifiant = 'cas d'utilisation' > Élément ciblé < / h3 >
< / centre >
< scénario >
fonction Applicateur() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / scénario >
< / corps >
L'explication du code ci-dessus est indiquée ci-dessous :
- Premièrement la ' bouton » et « h3 ' L'élément est créé de la même manière et la propriété CSS qui est appliquée sur le 'h3' L'élément est maintenant supprimé.
- Ensuite, à l'intérieur du ' Applicateur ', l'élément ciblé est sélectionné et le ' texteDécoration « propriété ayant une valeur de » surligner ' est attribué à l'élément.
Le résultat après l'exécution du code ci-dessus est affiché ci-dessous :
La sortie montre l’effet du « textDecoration = surligner » propriété sur le texte.
Exemple 4 : Propriété « textDecoration = underline »
La mise en œuvre pratique du texte lorsque la valeur de « souligner » est attribué au « texteDécoration 'La propriété est indiquée ci-dessous :
< scénario >fonction Applicateur ( ) {
document. getElementById ( 'cas d'utilisation' ) . style . texteDécoration = 'souligner' ;
}
scénario >
Après la compilation, le résultat ressemble à ceci :
La sortie montre que la ligne est ajoutée au bas du texte.
Exemple 5 : Propriété « textDecoration = line-through »
Implémentation visuelle du « texteDécoration « bien ayant la valeur de » ligne à travers » est affiché ci-dessous :
< scénario >fonction Applicateur ( ) {
document. getElementById ( 'cas d'utilisation' ) . style . texteDécoration = 'ligne à travers' ;
}
scénario >
La sortie générée pour le code ci-dessus est affichée ci-dessous :
La sortie montre l'effet produit par le ' ligne à travers ' sur le texte de l'élément ciblé.
Conclusion
Le style HTML DOM » texteDécoration La propriété ' traite spécifiquement du style des éléments HTML via JavaScript pour effectuer un style dynamique sur les éléments de texte. Plusieurs valeurs peuvent être attribuées à ce ' texteDécoration » pour effectuer différentes variations de style. Ces valeurs sont « aucun', 'surligner', 'souligné', 'interligne', 'initial', 'clignoter' et 'hériter' ». Ce blog a expliqué avec succès le processus par lequel le développeur peut appliquer des styles à l'aide de la propriété textDecoration.