Tekst er det vigtigste og mest synlige aktiv for enhver applikation eller webside, uden brug af tekst kan skaberen ikke fuldt ud formidle sine tanker eller levere information korrekt. På grund af dets behov og betydning bliver dens styling også et mareridt for de fleste udviklere. For statisk tekst hjælper CSS-egenskaberne og dens ramme meget, men stadig er der behov for en egenskab, der kan anvendes til at style dynamisk. Heldigvis er denne ejendom leveret af JavaScript med navnet ' tekstDekoration ”.
Denne blog vil give proceduren til at anvende stilarter over HTML-elementet via egenskaben textDecoration.
Sådan anvender du typografier ved hjælp af HTML DOM Style textDecoration-egenskaben?
DOM-stilen ' tekstDekoration ' ejendom udfører dybest set styling som at tilføje ' understregning, 'overstregning', 'gennemstregning' og 'blink ” over et valgt element. Denne egenskab, når den er indstillet til ' ingen ' fjerner standardstilen, der anvendes over det element som et ankermærke.
Syntaks
Syntaksen for DOM stil textDecoration egenskaben er:
eleObj. stil . tekstDekoration = 'ingen|overline|blink|understregning|initial|line-through|arve'
Besøg nedenstående tabel for at få en hurtig idé om de værdier, der kan tildeles ' tekstDekoration ” ejendom:
| Værdi | Forklaring |
|---|---|
| ingen | Konverter tekst til almindeligt format og fjern al foruddefineret styling; det er standard. |
| overline | Indsætter en linje over eller oven på den markerede tekst. |
| blinke | Får tekst til at blinke, men det understøttes ikke af alle webbrowsere. |
| understrege | Den placerer linjen under eller i bunden af den markerede tekst. |
| initial | Indstil den anvendte egenskab til dens standardværdi, som ikke er nogen i vores tilfælde. |
| line-through | Placer linjen i midten af teksten, dvs. mellem teksten. |
| du arver | Nedarver den egenskab, der er anvendt på rod- eller overordnet element. |
Lad os nu se på implementeringsprocessen og dens effekt på teksten for hver værdi af ' tekstDekoration ” ejendom.
Eksempel 1: 'tekstDecoration = ingen' egenskab
Den praktiske gennemførelse af ' tekstDekoration ' ejendom med værdien ' ingen ' vil blive forklaret i nedenstående kode:
< legeme >
< centrum >
< h1 stil = 'farve: kadetblå;' > Linux < / h1 >
< knap onclick = 'Applier()' > Applier < / knap >
< s > Når værdien af egenskaben textDecoration er sat til ingen: < / s >
< h3 id = 'useCase' stil = 'tekst-dekoration: overline;' > Målrettet element < / h3 >
< / centrum >
< manuskript >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ingen';
}
< / manuskript >
< / legeme >
Forklaring af ovennævnte kode:
- Først skal du bruge en '< knap >' tag for at oprette en knap og tildele den en begivenhedslytter af ' onclick ”. Denne hændelseslytter udløser en JavaScript-funktion ved navn ' Applier ”.
- Derefter skal du oprette et målrettet element ' h3 ' og tildel den et unikt id på ' useCase ”. Anvend også CSS ' tekst-dekoration ' ejendom til det med en værdi af ' overline ' ved hjælp af ' stil ' attribut.
- Indtast nu ' Applier ()' funktionstekst og vælg det målrettede element via dets id ' useCase ' og vedhæft stilen ' tekstDekoration ” ejendom.
- Tildel derefter egenskaben en værdi på ' ingen ” for at fjerne enhver præ-påført tekst-dekorationsstyling over elementet.
Visningen af websiden efter udførelse af ovenstående kode:
Outputtet viser den præ-styling, der er anvendt på det målrettede element, fjernes ved at tildele det en værdi på ' ingen ”.
Eksempel 2: “textDecoration = initial” egenskab
Nedenstående kodestykke illustrerer implementeringen af ' tekstDekoration ' ejendom, når værdien af ' initial ” er tildelt det:
< manuskript >fungere Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekoration = 'initial' ;
}
manuskript >
Output genereret efter kompileringen af ovenstående kode er vist nedenfor:
Ovenstående output viser, at værdien af tekstdekoration er indstillet til standardværdien, som er ' ingen ” og derfor er al pre-styling vendt tilbage.
Eksempel 3: “textDecoration = overline” egenskab
Nedenstående kode viser den praktiske implementering af ' tekstDekoration ' ejendom, når værdien af ' overline ” leveres til det:
< legeme >< centrum >
< h1 stil = 'farve: kadetblå;' > Linux < / h1 >
< knap onclick = 'Applier()' > Applier < / knap >
< s > Når værdien af egenskaben textDecoration er indstillet til overline: < / s >
< h3 id = 'useCase' > Målrettet element < / h3 >
< / centrum >
< manuskript >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / manuskript >
< / legeme >
Forklaringen af ovenstående kode er angivet nedenfor:
- For det første ' knap' og 'h3 ”-elementet oprettes på samme måde og CSS-egenskaben, som anvendes over 'h3' element er nu fjernet.
- Dernæst inde i ' Applier '-funktionen er det målrettede element valgt, og ' tekstDekoration ' ejendom med værdien ' overline ” er tildelt elementet.
Outputtet efter udførelsen af ovenstående kode vises nedenfor:
Outputtet viser effekten af ' tekstDecoration = overline ” egenskab over teksten.
Eksempel 4: “tekstDecoration = understregning” egenskab
Den praktiske implementering af teksten, når værdien af ' understrege ' er tildelt ' tekstDekoration ” ejendom er angivet nedenfor:
< manuskript >fungere Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekoration = 'understrege' ;
}
manuskript >
Efter kompileringen ser outputtet sådan ud:
Outputtet viser, at linjen er tilføjet nederst i teksten.
Eksempel 5: “textDecoration = line-through” egenskab
Visuel implementering af ' tekstDekoration ' ejendom med værdien af ' line-through ' er vist nedenfor:
< manuskript >fungere Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekoration = 'line-through' ;
}
manuskript >
Output genereret for ovenstående kode vises nedenfor:
Outputtet viser effekten udført af ' line-through ” over den målrettede elementtekst.
Konklusion
HTML DOM-stilen ' tekstDekoration ” egenskab beskæftiger sig specifikt med styling af HTML-elementer via JavaScript for at udføre dynamisk styling på tekstelementer. Flere værdier kan tildeles denne ' tekstDekoration ” at udføre forskellige variationer af styling. Disse værdier er ' ingen', 'overstregning', 'understregning', 'gennemstregning', 'initial', 'blink' og 'arv' ”. Denne blog har med succes forklaret processen, hvorved udvikleren kan anvende stilarter ved hjælp af egenskaben textDecoration.