Com aplicar estils amb la propietat HTML DOM Style textDecoration?

Com Aplicar Estils Amb La Propietat Html Dom Style Textdecoration



El text és l'actiu més important i més visible per a cada aplicació o pàgina web, sense l'ús de text, el creador no pot transmetre completament els seus pensaments ni oferir informació correctament. A causa de la seva necessitat i importància, el seu estil també es converteix en un malson per a la majoria de desenvolupadors. Per al text estàtic, les propietats CSS i el seu marc ajuden molt, però tot i així, hi ha una necessitat d'una propietat que es pugui aplicar a l'estil de manera dinàmica. Afortunadament, aquesta propietat la proporciona JavaScript amb el nom ' TextDecoració ”.

Aquest bloc proporcionarà el procediment per aplicar estils a l'element HTML mitjançant la propietat textDecoration.







Com aplicar estils amb la propietat HTML DOM Style textDecoration?

L'estil DOM' TextDecoració ', bàsicament, realitza un estil com afegir ' subratllat”, “sobrelineat”, “a través de línia” i “parpellejar ” sobre un element seleccionat. Aquesta propietat quan s'estableix en ' cap ” elimina l'estil predeterminat que s'aplica sobre aquest element com una etiqueta d'ancoratge.



Sintaxi

La sintaxi de la propietat textDecoration d'estil DOM és:



eleObj. estil . TextDecoració = 'cap|overline|parpellejar|subratllat|inicial|line-through|heretar'

Visiteu la taula següent per fer-vos una idea ràpida dels valors que es poden assignar al ' TextDecoració ' propietat:





Valor Explicació
cap Converteix el text al format normal eliminant tots els estils predefinits; és el predeterminat.
overline Insereix una línia per sobre o per sobre del text seleccionat.
parpellejar Fa parpellejar el text, però no és compatible amb tots els navegadors web.
subratllar Col·loca la línia a sota o a la part inferior del text seleccionat.
inicial Estableix la propietat aplicada al seu valor predeterminat que no és cap en el nostre cas.
a través de la línia Col·loca la línia al centre del text, és a dir, entre el text.
tu heretes Hereta la propietat aplicada a l'element arrel o pare.

Ara, fem una ullada al procés d'implementació i el seu efecte en el text per a cada valor del ' TextDecoració ' propietat.

Exemple 1: propietat 'textDecoration = none'.

La implementació pràctica del “ TextDecoració 'propietat amb un valor de' cap ” s'explicarà al codi següent:



< cos >
< centre >
< h1 estil = 'color: blau cadet;' > Linux < / h1 >

< botó fent clic = 'Aplicador()' > Aplicador < / botó >
< pàg > Quan el valor de la propietat textDecoration s'estableix en cap: < / pàg >
< h3 id = 'cas d'ús' estil = 'decoració de text: overline;' > Element objectiu < / h3 >
< / centre >
< guió >
funció Aplicador() {
document.getElementById('useCase').style.textDecoration = 'cap';
}
< / guió >
< / cos >

Explicació del codi anteriorment indicat:

  • Primer, utilitzeu un '< botó >' etiqueta per crear un botó i assignar-li un oient d'esdeveniments de ' fent clic ”. Aquest oient d'esdeveniments activa una funció JavaScript anomenada ' Aplicador ”.
  • A continuació, creeu un element orientat ' h3 ” i assigneu-li un identificador únic de “ cas d'ús ”. A més, apliqueu el CSS ' text-decoració ' propietat que té un valor de ' overline ' amb l'ajuda del ' estil ” atribut.
  • Ara, introduïu el ' Aplicador ()' cos de la funció i seleccioneu l'element objectiu mitjançant el seu identificador ' cas d'ús ' i adjunteu l'estil ' TextDecoració ' propietat.
  • Després d'això, assigneu a la propietat un valor de ' cap ” per eliminar qualsevol estil de decoració de text prèviament aplicat sobre l'element.

La vista de la pàgina web després de l'execució del codi anterior:

La sortida mostra que l'estil previ que s'aplica a l'element objectiu s'elimina assignant-li un valor de ' cap ”.

Exemple 2: propietat 'textDecoration = initial'.

El fragment de codi següent il·lustra la implementació del ' TextDecoració ' propietat quan el valor de ' inicial ” se li assigna:

< guió >
funció Aplicador ( ) {
document. getElementById ( 'cas d'ús' ) . estil . TextDecoració = 'inicial' ;
}
guió >

La sortida generada després de la compilació del codi anterior es mostra a continuació:

La sortida anterior mostra que el valor de la decoració del text s'estableix al seu valor predeterminat que és ' cap ” i, per tant, s'ha revertit tot el preestilisme.

Exemple 3: propietat 'textDecoration = overline'.

El codi següent mostra la implementació pràctica del ' TextDecoració ' propietat quan el valor de ' overline ” se li proporciona:

< cos >
< centre >
< h1 estil = 'color: blau cadet;' > Linux < / h1 >

< botó fent clic = 'Aplicador()' > Aplicador < / botó >
< pàg > Quan el valor de la propietat textDecoration s'estableix en overline: < / pàg >
< h3 id = 'cas d'ús' > Element objectiu < / h3 >
< / centre >
< guió >
funció Aplicador() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / guió >
< / cos >

A continuació s'explica l'explicació del codi anterior:

  • En primer lloc, el ' botó' i 'h3 ” es crea de la mateixa manera i la propietat CSS que s'aplica sobre el 'h3' l'element ara s'ha eliminat.
  • A continuació, dins del ' Aplicador ', l'element objectiu està seleccionat i el ' TextDecoració 'propietat amb un valor de' overline ” s'assigna a l'element.

La sortida després de l'execució del codi anterior es mostra a continuació:

La sortida mostra l'efecte del ' textDecoration = overline ” propietat sobre el text.

Exemple 4: propietat 'textDecoration = subratllat'.

La implementació pràctica del text quan el valor de “ subratllar ' s'assigna al ' TextDecoració La propietat s'indica a continuació:

< guió >
funció Aplicador ( ) {
document. getElementById ( 'cas d'ús' ) . estil . TextDecoració = 'subratllar' ;
}
guió >

Després de la compilació, la sortida té aquest aspecte:

La sortida mostra que la línia s'afegeix a la part inferior del text.

Exemple 5: propietat 'textDecoration = line-through'.

Implementació visual de la ' TextDecoració 'propietat amb el valor de' a través de la línia ” es mostra a continuació:

< guió >
funció Aplicador ( ) {
document. getElementById ( 'cas d'ús' ) . estil . TextDecoració = 'línia a través' ;
}
guió >

La sortida generada per al codi anterior es mostra a continuació:

La sortida mostra l'efecte fet pel ' a través de la línia ” sobre el text de l'element objectiu.

Conclusió

L'estil HTML DOM ' TextDecoració La propietat s'ocupa específicament de l'estil dels elements HTML mitjançant JavaScript per dur a terme un estil dinàmic als elements de text. Es poden assignar diversos valors a aquest ' TextDecoració ” per realitzar diferents variacions d'estilisme. Aquests valors són ' cap', 'sobreline', 'subratllat', 'de línia', 'inicial', 'parpellejar' i 'heretar' ”. Aquest bloc ha explicat correctament el procés pel qual el desenvolupador pot aplicar estils mitjançant la propietat textDecoration.