Text ist das wichtigste und sichtbarste Gut für jede Anwendung oder Webseite. Ohne die Verwendung von Text kann der Ersteller seine Gedanken nicht vollständig zum Ausdruck bringen oder Informationen richtig vermitteln. Aufgrund seiner Notwendigkeit und Wichtigkeit wird sein Design für die meisten Entwickler auch zum Albtraum. Bei statischem Text helfen die CSS-Eigenschaften und ihr Framework sehr, es besteht jedoch dennoch Bedarf an einer Eigenschaft, die dynamisch auf den Stil angewendet werden kann. Glücklicherweise wird diese Eigenschaft von JavaScript mit dem Namen „ TextDekoration “.
In diesem Blog wird das Verfahren zum Anwenden von Stilen auf das HTML-Element über die textDecoration-Eigenschaft bereitgestellt.
Wie wende ich Stile mithilfe der textDecoration-Eigenschaft des HTML-DOM-Stils an?
Der DOM-Stil „ TextDekoration Die Eigenschaft „“ führt im Grunde ein Styling durch, das dem Hinzufügen von „ „Unterstreichen“, „Überstreichen“, „Durchgestrichen“ und „Blinken“. ” über einem ausgewählten Element. Wenn diese Eigenschaft auf „ keiner „Entfernt den Standardstil, der wie ein Ankertag auf dieses Element angewendet wird.
Syntax
Die Syntax für die textDecoration-Eigenschaft im DOM-Stil lautet:
eleObj. Stil . TextDekoration = „none|overline|blink|underline|initial|line-through|inherit“
Sehen Sie sich die folgende Tabelle an, um einen schnellen Überblick über die Werte zu erhalten, die dem „“ zugewiesen werden können. TextDekoration ' Eigentum:
| Wert | Erläuterung |
|---|---|
| keiner | Konvertieren Sie Text in das einfache Format und entfernen Sie alle vordefinierten Stile. es ist die Standardeinstellung. |
| überstreichen | Fügt eine Zeile über oder über dem ausgewählten Text ein. |
| blinken | Lässt Text blinken, wird aber nicht von allen Webbrowsern unterstützt. |
| unterstreichen | Die Zeile wird unter oder am Ende des ausgewählten Textes platziert. |
| anfänglich | Setzen Sie die angewendete Eigenschaft auf ihren Standardwert, der in unserem Fall „none“ ist. |
| Line-Through | Platzieren Sie die Linie in der Mitte des Textes, also zwischen dem Text. |
| du erbst | Erbt die auf das Stamm- oder übergeordnete Element angewendete Eigenschaft. |
Werfen wir nun einen Blick auf den Implementierungsprozess und seine Auswirkungen auf den Text für jeden Wert von „ TextDekoration ' Eigentum.
Beispiel 1: Eigenschaft „textDecoration = none“.
Die praktische Umsetzung des „ TextDekoration „Eigenschaft mit einem Wert von“ keiner „wird im folgenden Code erklärt:
< Körper >
< Center >
< h1 Stil = „Farbe: Kadettenblau;“ > Linux < / h1 >
< Taste onclick = „Applier()“ > Applikator < / Taste >
< P > Wenn der Wert der textDecoration-Eigenschaft auf „Keine“ festgelegt ist: < / P >
< h3 Ausweis = 'Anwendungsfall' Stil = „text-decoration: overline;“ > Gezieltes Element < / h3 >
< / Center >
< Skript >
Funktion Applyer() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / Skript >
< / Körper >
Erklärung des oben genannten Codes:
- Verwenden Sie zunächst ein „< Taste >“-Tag, um eine Schaltfläche zu erstellen und ihr einen Ereignis-Listener von „ zuzuweisen onclick “. Dieser Ereignis-Listener löst eine JavaScript-Funktion mit dem Namen „ Applikator “.
- Als nächstes erstellen Sie ein gezieltes Element „ h3 ” und weisen Sie ihm eine eindeutige ID von „ zu Anwendungsfall “. Wenden Sie außerdem das CSS an „ Textdekoration ” Eigentum daran mit einem Wert von „ überstreichen ” mit Hilfe der „ Stil ” Attribut.
- Geben Sie nun „ Applikator ()“ Funktionskörper und wählen Sie das Zielelement über seine ID aus „ Anwendungsfall ” und fügen Sie den Stil hinzu „ TextDekoration ' Eigentum.
- Weisen Sie der Eigenschaft anschließend den Wert „ zu. keiner ”, um alle vorab angewendeten Textdekorationsstile über dem Element zu entfernen.
Die Ansicht der Webseite nach der Ausführung des obigen Codes:
Die Ausgabe zeigt, dass das auf das Zielelement angewendete Pre-Styling entfernt wird, indem ihm der Wert „ keiner “.
Beispiel 2: Eigenschaft „textDecoration = initial“.
Der folgende Codeausschnitt veranschaulicht die Implementierung von „ TextDekoration „Eigenschaft, wenn der Wert von „ anfänglich ” ist ihm zugeordnet:
< Skript >Funktion Applikator ( ) {
dokumentieren. getElementById ( 'Anwendungsfall' ) . Stil . TextDekoration = 'anfänglich' ;
}
Skript >
Die nach der Kompilierung des obigen Codes generierte Ausgabe ist unten dargestellt:
Die obige Ausgabe zeigt, dass der Wert der Textdekoration auf den Standardwert gesetzt ist, der „ keiner ” und daher wurde das gesamte Pre-Styling rückgängig gemacht.
Beispiel 3: Eigenschaft „textDecoration = overline“.
Der folgende Code zeigt die praktische Umsetzung des „ TextDekoration „Eigenschaft, wenn der Wert von „ überstreichen ” wird ihm zur Verfügung gestellt:
< Körper >< Center >
< h1 Stil = „Farbe: Kadettenblau;“ > Linux < / h1 >
< Taste onclick = „Applier()“ > Applikator < / Taste >
< P > Wenn der Wert der Eigenschaft textDecoration auf overline gesetzt ist: < / P >
< h3 Ausweis = 'Anwendungsfall' > Gezieltes Element < / h3 >
< / Center >
< Skript >
Funktion Applyer() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / Skript >
< / Körper >
Die Erklärung des obigen Codes ist unten angegeben:
- Zuerst die ' Taste“ und „h3 Das Element wird auf die gleiche Weise erstellt und die CSS-Eigenschaft, die über das angewendet wird „h3“ Element ist nun entfernt.
- Als nächstes innerhalb des „ Applikator ”-Funktion wird das Zielelement ausgewählt und die „ TextDekoration „Eigenschaft mit einem Wert von“ überstreichen ” wird dem Element zugewiesen.
Die Ausgabe nach der Ausführung des obigen Codes wird unten angezeigt:
Die Ausgabe zeigt die Wirkung des „ textDecoration = overline ”-Eigenschaft über den Text.
Beispiel 4: Eigenschaft „textDecoration = underline“.
Die praktische Umsetzung des Textes, wenn der Wert von „ unterstreichen ” ist dem „ zugeordnet TextDekoration „Eigenschaft ist unten angegeben:
< Skript >Funktion Applikator ( ) {
dokumentieren. getElementById ( 'Anwendungsfall' ) . Stil . TextDekoration = 'unterstreichen' ;
}
Skript >
Nach der Kompilierung sieht die Ausgabe so aus:
Die Ausgabe zeigt, dass die Zeile am Ende des Textes hinzugefügt wurde.
Beispiel 5: Eigenschaft „textDecoration = line-through“.
Visuelle Umsetzung des „ TextDekoration „Eigenschaft mit dem Wert „ Line-Through ” wird unten angezeigt:
< Skript >Funktion Applikator ( ) {
dokumentieren. getElementById ( 'Anwendungsfall' ) . Stil . TextDekoration = „Durchgang“ ;
}
Skript >
Die für den obigen Code generierte Ausgabe wird unten angezeigt:
Die Ausgabe zeigt den Effekt, der durch „ Line-Through ” über dem Zielelementtext.
Abschluss
Der HTML-DOM-Stil „ TextDekoration Die Eigenschaft befasst sich speziell mit der Gestaltung von HTML-Elementen über JavaScript, um eine dynamische Gestaltung von Textelementen durchzuführen. Diesem können mehrere Werte zugeordnet werden „ TextDekoration ” um verschiedene Variationen des Stylings durchzuführen. Diese Werte sind „ none“, „overline“, „underline“, „line-through“, „initial“, „blink“ und „inherit“. “. In diesem Blog wurde erfolgreich der Prozess erläutert, mit dem der Entwickler mithilfe der textDecoration-Eigenschaft Stile anwenden kann.