Text är den viktigaste och mest synliga tillgången för varje applikation eller webbsida, utan användning av text kan skaparen inte fullt ut förmedla sina tankar eller leverera information på rätt sätt. På grund av dess behov och betydelse blir dess styling också en mardröm för de flesta utvecklare. För statisk text hjälper CSS-egenskaperna och dess ramverk mycket men ändå finns det ett behov av en egenskap som kan appliceras på stil dynamiskt. Lyckligtvis tillhandahålls den här egenskapen av JavaScript med namnet ' textDekoration ”.
Den här bloggen kommer att tillhandahålla proceduren för att tillämpa stilar över HTML-elementet via egenskapen textDecoration.
Hur man tillämpar stilar med HTML DOM Style textDecoration Property?
DOM-stilen ' textDekoration ' egenskap utför i princip styling som att lägga till ' understryka”, ”överlinje”, ”genomlinje” och ”blinka ” över ett valt element. Denna egenskap när den är inställd på ' ingen ” tar bort standardstilen som tillämpas över det elementet som en ankartagg.
Syntax
Syntaxen för DOM-stil textDecoration-egenskapen är:
eleObj. stil . textDekoration = 'ingen|överlinje|blinka|understrykning|initial|genomlinje|ärv'
Besök tabellen nedan för att få en snabb uppfattning om de värden som kan tilldelas ' textDekoration ' fast egendom:
| Värde | Förklaring |
|---|---|
| ingen | Konvertera text till vanligt format och ta bort all fördefinierad stil; det är standard. |
| överlinje | Infogar en rad över eller ovanpå den markerade texten. |
| blinka | Får text att blinka men det stöds inte av alla webbläsare. |
| Understrykning | Den placerar raden under eller längst ned i den markerade texten. |
| första | Ställ in den tillämpade egenskapen till dess standardvärde som inte är något i vårt fall. |
| Linje genom | Placera linjen i mitten av texten, dvs mellan texten. |
| du ärver | Ärver egenskapen som tillämpas på rot- eller överordnade elementet. |
Låt oss nu ta en titt på implementeringsprocessen och dess effekt på text för varje värde av ' textDekoration ' fast egendom.
Exempel 1: Egenskapen 'textDecoration = none'.
Det praktiska genomförandet av ' textDekoration ' egendom som har värdet ' ingen ” kommer att förklaras i nedanstående kod:
< kropp >
< Centrum >
< h1 stil = 'färg: kadettblå;' > Linux < / h1 >
< knapp onclick = 'Applier()' > Applikator < / knapp >
< sid > När värdet för textDecoration-egenskapen är inställt på none: < / sid >
< h3 id = 'användningsfall' stil = 'text-decoration: overline;' > Riktat element < / h3 >
< / Centrum >
< manus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ingen';
}
< / manus >
< / kropp >
Förklaring av ovanstående kod:
- Använd först en '< knapp >'-tagg för att skapa en knapp och tilldela den en händelseavlyssnare av ' onclick ”. Den här händelseavlyssnaren utlöser en JavaScript-funktion med namnet ' Applikator ”.
- Skapa sedan ett riktat element ' h3 ' och tilldela den ett unikt id för ' användningsfall ”. Använd också CSS ' text-dekoration ' egendom till den med ett värde av ' överlinje ' med hjälp av ' stil ' attribut.
- Ange nu ' Applikator ()' funktionskropp och välj det inriktade elementet via dess id ' användningsfall ' och bifoga stilen ' textDekoration ' fast egendom.
- Tilldela sedan egenskapen värdet ' ingen ” för att ta bort eventuell förapplicerad textdekorationsstil över elementet.
Vyn av webbsidan efter exekvering av ovanstående kod:
Utdata visar att förstylingen som tillämpas på det riktade elementet tas bort genom att tilldela det värdet ' ingen ”.
Exempel 2: Egenskapen 'textDecoration = initial'.
Kodavsnittet nedan illustrerar implementeringen av ' textDekoration ' egendom när värdet av ' första ' är tilldelad den:
< manus >fungera Applikator ( ) {
dokumentera. getElementById ( 'användningsfall' ) . stil . textDekoration = 'första' ;
}
manus >
Utdata som genereras efter kompileringen av ovanstående kod visas nedan:
Ovanstående utdata visar att värdet för textdekoration är satt till dess standardvärde som är ' ingen ” och därför har all pre-styling återställts.
Exempel 3: Egenskapen 'textDecoration = overline'.
Koden nedan visar den praktiska implementeringen av ' textDekoration ' egendom när värdet av ' överlinje ” tillhandahålls till den:
< kropp >< Centrum >
< h1 stil = 'färg: kadettblå;' > Linux < / h1 >
< knapp onclick = 'Applier()' > Applikator < / knapp >
< sid > När värdet för textDecoration-egenskapen är inställd på överlinje: < / sid >
< h3 id = 'användningsfall' > Riktat element < / h3 >
< / Centrum >
< manus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'överlinje';
}
< / manus >
< / kropp >
Förklaringen av ovanstående kod anges nedan:
- Först, ' knappen' och 'h3 ”-element skapas på samma sätt och CSS-egenskapen som appliceras över 'h3' elementet är nu borttaget.
- Därefter inuti ' Applikator '-funktionen väljs det inriktade elementet och ' textDekoration ' egendom som har värdet ' överlinje ” tilldelas elementet.
Utdata efter exekvering av ovanstående kod visas nedan:
Utdata visar effekten av ' textDecoration = överlinje ” egenskap över texten.
Exempel 4: Egenskapen 'textDecoration = understrykning'.
Den praktiska implementeringen av texten när värdet av ' Understrykning ' är tilldelad ' textDekoration ' egenskapen anges nedan:
< manus >fungera Applikator ( ) {
dokumentera. getElementById ( 'användningsfall' ) . stil . textDekoration = 'Understrykning' ;
}
manus >
Efter kompileringen ser resultatet ut så här:
Utdata visar att raden läggs till längst ner i texten.
Exempel 5: Egenskapen 'textDecoration = line-through'.
Visuell implementering av ' textDekoration ' egendom som har värdet ' Linje genom ' visas nedan:
< manus >fungera Applikator ( ) {
dokumentera. getElementById ( 'användningsfall' ) . stil . textDekoration = 'Linje genom' ;
}
manus >
Utdata som genereras för ovanstående kod visas nedan:
Utdata visar effekten som görs av ' Linje genom ” över målelementets text.
Slutsats
HTML DOM-stilen ' textDekoration ”-egenskapen handlar specifikt om styling av HTML-element via JavaScript för att utföra dynamisk styling på textelement. Flera värden kan tilldelas denna ' textDekoration ” för att utföra olika varianter av styling. Dessa värden är ' ingen', 'överlinje', 'understrykning', 'genomlinje', 'initial', 'blinka' och 'ärv ”. Den här bloggen har framgångsrikt förklarat processen genom vilken utvecklaren kan tillämpa stilar med hjälp av egenskapen textDecoration.