Tekst is het belangrijkste en meest zichtbare bezit voor elke applicatie of webpagina. Zonder het gebruik van tekst kan de maker zijn gedachten niet volledig overbrengen of informatie goed overbrengen. Vanwege de noodzaak en het belang ervan wordt de styling voor de meeste ontwikkelaars ook een nachtmerrie. Voor statische tekst helpen de CSS-eigenschappen en het bijbehorende raamwerk veel, maar toch is er behoefte aan een eigenschap die dynamisch op stijl kan worden toegepast. Gelukkig wordt deze eigenschap geleverd door JavaScript met de naam “ tekstDecoratie ”.
Deze blog biedt de procedure om stijlen toe te passen op het HTML-element via de eigenschap textDecoration.
Hoe stijlen toepassen met behulp van de HTML DOM Style textDecoration-eigenschap?
De DOM-stijl “ tekstDecoratie 'eigenschap voert in feite styling uit zoals het toevoegen van' onderstrepen”, “overlijnen”, “doorstrepen” en “knipperen”. ” over een geselecteerd element. Wanneer deze eigenschap is ingesteld op “ geen 'verwijdert de standaardstijl die op dat element wordt toegepast, zoals een ankertag.
Syntaxis
De syntaxis voor de eigenschap textDecoration in DOM-stijl is:
eleObj. stijl . tekstDecoratie = 'geen|overlijning|knipperen|onderstrepen|initiële|doorlijning|overnemen'
Bezoek de onderstaande tabel om snel een idee te krijgen van de waarden die kunnen worden toegewezen aan de “ tekstDecoratie ' eigendom:
| Waarde | Uitleg |
|---|---|
| geen | Converteer tekst naar het gewone formaat en verwijder alle vooraf gedefinieerde stijlen; het is de standaard. |
| bovenlijn | Voegt een lijn in over of bovenop de geselecteerde tekst. |
| knipperen | Laat tekst knipperen, maar wordt niet door alle webbrowsers ondersteund. |
| onderstrepen | Het plaatst de lijn onder of onderaan de geselecteerde tekst. |
| voorletter | Stel de toegepaste eigenschap in op de standaardwaarde, die in ons geval geen is. |
| lijn door | Plaats de lijn in het midden van de tekst, dat wil zeggen tussen de tekst. |
| je erft | Neemt de eigenschap over die is toegepast op het hoofd- of bovenliggende element. |
Laten we nu eens kijken naar het implementatieproces en het effect ervan op tekst voor elke waarde van de “ tekstDecoratie ' eigendom.
Voorbeeld 1: “textDecoration = none” Eigenschap
De praktische uitvoering van de “ tekstDecoratie ‘eigendom met een waarde van’ geen ”wordt uitgelegd in onderstaande code:
< lichaam >
< centrum >
< h1 stijl = 'kleur: cadetblauw;' > Linux < / h1 >
< knop bij klikken = 'Toepasser()' > Aanvrager < / knop >
< P > Wanneer de waarde van de eigenschap textDecoration is ingesteld op geen: < / P >
< h3 ID kaart = 'useCase' stijl = 'tekstdecoratie: bovenlijn;' > Gericht element < / h3 >
< / centrum >
< script >
functie Toepasser() {
document.getElementById('useCase').style.textDecoration = 'geen';
}
< / script >
< / lichaam >
Uitleg van de bovengenoemde code:
- Gebruik eerst een “< knop >” tag om een knop te maken en deze een gebeurtenislistener van “ bij klikken ”. Deze gebeurtenislistener activeert een JavaScript-functie met de naam “ Aanvrager ”.
- Maak vervolgens een gericht element “ h3 ' en wijs er een unieke ID aan toe: ' gebruikCase ”. Pas ook de CSS toe “ tekstdecoratie 'eigendom met een waarde van' bovenlijn ” met behulp van de “ stijl attribuut.
- Voer nu de “ Aanvrager ()” functietekst en selecteer het beoogde element via zijn id “ gebruikCase ' en voeg de stijl toe ' tekstDecoratie ' eigendom.
- Wijs daarna de eigenschap een waarde toe van “ geen ” om vooraf toegepaste tekstversieringsstijlen op het element te verwijderen.
De weergave van de webpagina na het uitvoeren van de bovenstaande code:
De uitvoer laat zien dat de pre-styling die op het beoogde element wordt toegepast, wordt verwijderd door er een waarde van “ geen ”.
Voorbeeld 2: “textDecoration = initial” Eigenschap
Het onderstaande codefragment illustreert de implementatie van de “ tekstDecoratie ” eigenschap wanneer de waarde van “ voorletter ” wordt eraan toegewezen:
< script >functie Aanvrager ( ) {
document. getElementById ( 'useCase' ) . stijl . tekstDecoratie = 'voorletter' ;
}
script >
De uitvoer die wordt gegenereerd na het compileren van de bovenstaande code wordt hieronder weergegeven:
De bovenstaande uitvoer laat zien dat de waarde van tekstdecoratie is ingesteld op de standaardwaarde, namelijk “ geen 'En daarom is alle pre-styling teruggedraaid.
Voorbeeld 3: Eigenschap “textDecoration = overline”.
De onderstaande code toont de praktische implementatie van de “ tekstDecoratie ” eigenschap wanneer de waarde van “ bovenlijn ” wordt eraan verstrekt:
< lichaam >< centrum >
< h1 stijl = 'kleur: cadetblauw;' > Linux < / h1 >
< knop bij klikken = 'Toepasser()' > Aanvrager < / knop >
< P > Wanneer de waarde van de eigenschap textDecoration is ingesteld op overline: < / P >
< h3 ID kaart = 'useCase' > Gericht element < / h3 >
< / centrum >
< script >
functie Toepasser() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / script >
< / lichaam >
De uitleg van de bovenstaande code staat hieronder:
- Eerst de ' knop” en “h3 ”-element wordt op dezelfde manier gemaakt en de CSS-eigenschap die wordt toegepast op de “h3” element is nu verwijderd.
- Vervolgens, binnen de “ Aanvrager ”-functie wordt het beoogde element geselecteerd en de “ tekstDecoratie ‘eigendom met een waarde van’ bovenlijn ” is toegewezen aan het element.
De uitvoer na het uitvoeren van de bovenstaande code wordt hieronder weergegeven:
De uitvoer toont het effect van de “ tekstDecoratie = bovenlijn 'eigenschap over de tekst.
Voorbeeld 4: Eigenschap “textDecoration = underline”.
De praktische implementatie van de tekst wanneer de waarde van “ onderstrepen ” wordt toegewezen aan de “ tekstDecoratie ” eigendom staat hieronder vermeld:
< script >functie Aanvrager ( ) {
document. getElementById ( 'useCase' ) . stijl . tekstDecoratie = 'onderstrepen' ;
}
script >
Na de compilatie ziet de uitvoer er als volgt uit:
De uitvoer laat zien dat de regel onderaan de tekst is toegevoegd.
Voorbeeld 5: Eigenschap “textDecoration = line-through”.
Visuele implementatie van de “ tekstDecoratie ‘eigendom met de waarde van’ lijn door ” staat hieronder weergegeven:
< script >functie Aanvrager ( ) {
document. getElementById ( 'useCase' ) . stijl . tekstDecoratie = 'lijn door' ;
}
script >
De uitvoer die voor de bovenstaande code is gegenereerd, wordt hieronder weergegeven:
De uitvoer toont het effect van de “ lijn door ” over de beoogde elementtekst.
Conclusie
De HTML DOM-stijl “ tekstDecoratie ”-eigenschap houdt zich specifiek bezig met de styling van HTML-elementen via JavaScript om dynamische styling op tekstelementen uit te voeren. Hieraan kunnen meerdere waarden worden toegewezen “ tekstDecoratie ”om verschillende variaties van styling uit te voeren. Deze waarden zijn “ geen”, “overlijning”, “onderstreping”, “doorlijning”, “initieel”, “knipperen” en “overnemen ”. In deze blog is met succes het proces uitgelegd waarmee de ontwikkelaar stijlen kan toepassen met behulp van de eigenschap textDecoration.