Tekst er den viktigste og mest synlige ressursen for hver applikasjon eller nettside, uten bruk av tekst kan skaperen ikke fullt ut formidle tankene sine eller levere informasjon på riktig måte. På grunn av behovet og viktigheten, blir stylingen også et mareritt for de fleste utviklere. For statisk tekst hjelper CSS-egenskapene og rammeverket mye, men likevel er det behov for en egenskap som kan brukes på stil dynamisk. Heldigvis er denne egenskapen levert av JavaScript med navnet ' tekstDekorasjon '.
Denne bloggen vil gi prosedyren for å bruke stiler over HTML-elementet via egenskapen textDecoration.
Hvordan bruke stiler ved hjelp av HTML DOM Style textDecoration Property?
DOM-stilen ' tekstDekorasjon ' eiendom utfører i utgangspunktet styling som å legge til ' understreking, 'overlinje', 'gjennomstrekning' og 'blink ' over et valgt element. Denne egenskapen når den er satt til ' ingen ' fjerner standardstilen som brukes over det elementet som en ankertag.
Syntaks
Syntaksen for DOM-stil textDecoration-egenskapen er:
eleObj. stil . tekstDekorasjon = 'ingen|overlinje|blink|understreking|innledende|gjennomlinje|arv'
Besøk tabellen nedenfor for å få en rask idé om verdiene som kan tilordnes ' tekstDekorasjon ' eiendom:
| Verdi | Forklaring |
|---|---|
| ingen | Konverter tekst til vanlig format og fjern all forhåndsdefinert stil; det er standard. |
| overlinje | Setter inn en linje over eller oppå den valgte teksten. |
| blinke | Får tekst til å blinke, men det støttes ikke av alle nettlesere. |
| understreke | Den plasserer linjen under eller nederst i den valgte teksten. |
| første | Sett den brukte egenskapen til standardverdien, som er ingen i vårt tilfelle. |
| gjennomgående | Plasser linjen i midten av teksten, dvs. mellom teksten. |
| du arver | Arver egenskapen brukt på rot- eller overordnet element. |
La oss nå se på implementeringsprosessen og dens effekt på tekst for hver verdi av ' tekstDekorasjon ' eiendom.
Eksempel 1: «tekstdekorasjon = ingen» egenskap
Den praktiske gjennomføringen av ' tekstDekorasjon ' eiendom som har en verdi på ' ingen ' kommer til å bli forklart i koden nedenfor:
< kropp >
< senter >
< h1 stil = 'farge: kadettblå;' > Linux < / h1 >
< knapp ved trykk = 'Applier()' > Applier < / knapp >
< s > Når verdien til egenskapen textDecoration er satt til ingen: < / s >
< h3 id = 'useCase' stil = 'text-decoration: overline;' > Målrettet element < / h3 >
< / senter >
< manus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ingen';
}
< / manus >
< / kropp >
Forklaring av koden ovenfor:
- Bruk først en '< knapp >' tag for å lage en knapp og tilordne den en hendelseslytter av ' ved trykk '. Denne hendelseslytteren utløser en JavaScript-funksjon kalt ' Applier '.
- Deretter oppretter du et målrettet element ' h3 ' og tilordne den en unik ID av ' useCase '. Bruk også CSS ' tekst-dekorasjon ' eiendom til den som har en verdi på ' overlinje ' ved hjelp av ' stil ' Egenskap.
- Nå, skriv inn ' Applier ()' funksjonstekst og velg målelementet via dets id ' useCase ' og fest stilen ' tekstDekorasjon ' eiendom.
- Etter det, tilordne egenskapen en verdi på ' ingen ” for å fjerne eventuell forhåndspåført tekstdekorasjonsstil over elementet.
Visningen av nettsiden etter utførelse av koden ovenfor:
Utdataene viser at forhåndsstylingen som er brukt på det målrettede elementet blir fjernet ved å tilordne det en verdi på ' ingen '.
Eksempel 2: «textDecoration = initial» egenskap
Kodebiten nedenfor illustrerer implementeringen av ' tekstDekorasjon ' eiendom når verdien av ' første ' er tildelt den:
< manus >funksjon Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekorasjon = 'første' ;
}
manus >
Utdataene generert etter kompileringen av koden ovenfor er vist nedenfor:
Utdataene ovenfor viser at verdien for tekstdekorasjon er satt til standardverdien som er ' ingen ” og dermed har all pre-styling blitt tilbakeført.
Eksempel 3: «textDecoration = overline»-egenskap
Koden nedenfor viser den praktiske implementeringen av ' tekstDekorasjon ' eiendom når verdien av ' overlinje ' er gitt til den:
< kropp >< senter >
< h1 stil = 'farge: kadettblå;' > Linux < / h1 >
< knapp ved trykk = 'Applier()' > Applier < / knapp >
< s > Når verdien til egenskapen textDecoration er satt til overlinje: < / s >
< h3 id = 'useCase' > Målrettet element < / h3 >
< / senter >
< manus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / manus >
< / kropp >
Forklaringen av koden ovenfor er angitt nedenfor:
- Først, ' knapp' og 'h3 ”-elementet er opprettet på samme måte og CSS-egenskapen som brukes over 'h3' elementet er nå fjernet.
- Deretter inne i ' Applier '-funksjonen det målrettede elementet er valgt og ' tekstDekorasjon ' eiendom som har en verdi på ' overlinje ” er tilordnet elementet.
Utgangen etter utførelse av koden ovenfor vises nedenfor:
Utgangen viser effekten av ' tekstDekorasjon = overlinje ” egenskap over teksten.
Eksempel 4: «tekstDekorasjon = understreking» egenskap
Den praktiske implementeringen av teksten når verdien av ' understreke ' er tildelt ' tekstDekorasjon ' eiendom er oppgitt nedenfor:
< manus >funksjon Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekorasjon = 'understrek' ;
}
manus >
Etter kompileringen ser utdataene slik ut:
Utdataene viser at linjen er lagt til nederst i teksten.
Eksempel 5: «textDecoration = line-through»-egenskap
Visuell implementering av ' tekstDekorasjon ' eiendom som har verdien av ' gjennomgående ' vises nedenfor:
< manus >funksjon Applier ( ) {
dokument. getElementById ( 'useCase' ) . stil . tekstDekorasjon = 'line-through' ;
}
manus >
Utdataene generert for koden ovenfor vises nedenfor:
Utgangen viser effekten utført av ' gjennomgående ' over den målrettede elementteksten.
Konklusjon
HTML DOM-stilen ' tekstDekorasjon ”-egenskapen omhandler spesifikt styling av HTML-elementer via JavaScript for å utføre dynamisk styling på tekstelementer. Flere verdier kan tilordnes denne ' tekstDekorasjon ” for å utføre ulike varianter av styling. Disse verdiene er ' ingen', 'overlinje', 'understreking', 'gjennomstrekning', 'initial', 'blink' og 'arv' '. Denne bloggen har forklart prosessen der utvikleren kan bruke stiler ved hjelp av egenskapen textDecoration.