Text je najdôležitejším a najviditeľnejším aktívom pre každú aplikáciu alebo webovú stránku, bez použitia textu nemôže tvorca plne vyjadriť svoje myšlienky alebo poskytnúť informácie správne. Vďaka svojej potrebe a dôležitosti sa aj jej styling stáva nočnou morou väčšiny vývojárov. Pre statický text veľmi pomáhajú vlastnosti CSS a jeho rámec, ale stále je potrebná vlastnosť, ktorú možno použiť na štýl dynamicky. Našťastie túto vlastnosť poskytuje JavaScript s názvom „ textDekorácia “.
Tento blog poskytne postup na aplikovanie štýlov na prvok HTML prostredníctvom vlastnosti textDecoration.
Ako použiť štýly pomocou vlastnosti štýlu HTML DOM textDecoration?
Štýl DOM' textDekorácia “vlastnosť v podstate vykonáva štýl ako pridanie “ podčiarknuté, „prečiarknuté“, „prečiarknuté“ a „blikanie“. “ nad vybraným prvkom. Táto vlastnosť, keď je nastavená na „ žiadny ” odstráni predvolený štýl, ktorý sa použije na tento prvok ako kotviaca značka.
Syntax
Syntax pre vlastnosť textDecoration štýlu DOM je:
eleObj. štýl . textDekorácia = 'žiadne|podčiarknuté|bliknutie|podčiarknutie|počiatočné|prečiarknutie|zdiť'
V nižšie uvedenej tabuľke získate rýchlu predstavu o hodnotách, ktoré možno priradiť k „ textDekorácia ' nehnuteľnosť:
| Hodnota | Vysvetlenie |
|---|---|
| žiadny | Previesť text do obyčajného formátu odstránením všetkých preddefinovaných štýlov; je predvolená. |
| overline | Vloží riadok nad alebo nad vybratý text. |
| blikať | Bliká text, ale nie je podporovaný všetkými webovými prehliadačmi. |
| zdôrazniť | Umiestňuje riadok pod alebo na spodok vybratého textu. |
| počiatočné | Nastavte použitú vlastnosť na jej predvolenú hodnotu, ktorá v našom prípade nie je žiadna. |
| line-through | Umiestnite riadok do stredu textu, t. j. medzi text. |
| dedíš | Zdedí vlastnosť použitú na koreňový alebo rodičovský prvok. |
Teraz sa pozrime na proces implementácie a jeho vplyv na text pre každú hodnotu „ textDekorácia ' nehnuteľnosť.
Príklad 1: Vlastnosť „textDecoration = none“.
Praktická implementácia „ textDekorácia “ nehnuteľnosť s hodnotou “ žiadny “ bude vysvetlené v nižšie uvedenom kóde:
< telo >
< stred >
< h1 štýl = 'color: kadetblue;' > Linux < / h1 >
< tlačidlo po kliknutí = 'Aplikátor()' > Aplikátor < / tlačidlo >
< p > Keď je hodnota vlastnosti textDecoration nastavená na žiadnu: < / p >
< h3 id = 'useCase' štýl = 'text-decoration: overline;' > Cielený prvok < / h3 >
< / stred >
< skript >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / skript >
< / telo >
Vysvetlenie vyššie uvedeného kódu:
- Najprv použite „< tlačidlo >“ na vytvorenie tlačidla a priradenie prijímača udalosti „ po kliknutí “. Tento prijímač udalostí spúšťa funkciu JavaScript s názvom „ Aplikátor “.
- Ďalej vytvorte cielený prvok “ h3 “ a priraďte mu jedinečné ID „ useCase “. Tiež použite CSS “ text-dekorácia ” majetok, ktorý má hodnotu “ overline “ s pomocou „ štýl “.
- Teraz zadajte „ Aplikátor ()“ telo funkcie a vyberte cieľový prvok prostredníctvom jeho id „ useCase “ a pripojte štýl “ textDekorácia ' nehnuteľnosť.
- Potom priraďte vlastnosti hodnotu „ žiadny ” na odstránenie akéhokoľvek vopred aplikovaného štýlu zdobenia textu nad prvkom.
Zobrazenie webovej stránky po vykonaní vyššie uvedeného kódu:
Výstup zobrazuje predbežný štýl, ktorý sa aplikuje na cieľový prvok, ktorý sa odstráni priradením hodnoty „ žiadny “.
Príklad 2: Vlastnosť „textDecoration = initial“.
Nižšie uvedený útržok kódu ilustruje implementáciu „ textDekorácia „vlastnosť, keď hodnota „ počiatočné “ je mu priradený:
< skript >funkciu Aplikátor ( ) {
dokument. getElementById ( 'useCase' ) . štýl . textDekorácia = 'počiatočné' ;
}
skript >
Výstup vygenerovaný po kompilácii vyššie uvedeného kódu je uvedený nižšie:
Vyššie uvedený výstup ukazuje, že hodnota dekorácie textu je nastavená na predvolenú hodnotu, ktorá je „ žiadny “, a preto boli všetky predbežné úpravy vrátené späť.
Príklad 3: Vlastnosť „textDecoration = overline“.
Nižšie uvedený kód ukazuje praktickú implementáciu „ textDekorácia „vlastnosť, keď hodnota „ overline “ sa mu poskytuje:
< telo >< stred >
< h1 štýl = 'color: kadetblue;' > Linux < / h1 >
< tlačidlo po kliknutí = 'Aplikátor()' > Aplikátor < / tlačidlo >
< p > Keď je hodnota vlastnosti textDecoration nastavená na overline: < / p >
< h3 id = 'useCase' > Cielený prvok < / h3 >
< / stred >
< skript >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / skript >
< / telo >
Vysvetlenie vyššie uvedeného kódu je uvedené nižšie:
- Po prvé, „ tlačidlo“ a „h3 ” element je vytvorený rovnakým spôsobom a vlastnosť CSS, ktorá je aplikovaná na 'h3' prvok je teraz odstránený.
- Ďalej vo vnútri „ Aplikátor ” sa vyberie cieľový prvok a textDekorácia “ nehnuteľnosť s hodnotou “ overline ” je priradené k prvku.
Výstup po vykonaní vyššie uvedeného kódu sa zobrazí nižšie:
Výstup ukazuje efekt „ textDecoration = overline ” vlastnosť nad textom.
Príklad 4: Vlastnosť „textDecoration = underline“.
Praktická implementácia textu, keď hodnota „ zdôrazniť “ je priradený k „ textDekorácia “ nehnuteľnosť je uvedená nižšie:
< skript >funkciu Aplikátor ( ) {
dokument. getElementById ( 'useCase' ) . štýl . textDekorácia = 'zdôrazniť' ;
}
skript >
Po kompilácii vyzerá výstup takto:
Výstup ukazuje, že riadok je pridaný na spodok textu.
Príklad 5: Vlastnosť „textDecoration = line-through“.
Vizuálna implementácia „ textDekorácia “ nehnuteľnosť v hodnote “ line-through “ je zobrazený nižšie:
< skript >funkciu Aplikátor ( ) {
dokument. getElementById ( 'useCase' ) . štýl . textDekorácia = 'line-through' ;
}
skript >
Výstup vygenerovaný pre vyššie uvedený kód je zobrazený nižšie:
Výstup zobrazuje efekt vykonaný „ line-through ” nad textom zacieleného prvku.
Záver
Štýl HTML DOM “ textDekorácia Vlastnosť ” sa špecificky zaoberá štýlom prvkov HTML prostredníctvom JavaScriptu na vykonávanie dynamického štýlu na textových prvkoch. Tomuto '' možno priradiť viacero hodnôt.' textDekorácia “ na vykonávanie rôznych variácií stylingu. Tieto hodnoty sú „ žiadne, „prečiarknuté“, „podčiarknuté“, „prečiarknuté“, „počiatočné“, „blikať“ a „zdediť“ “. Tento blog úspešne vysvetlil proces, ktorým môže vývojár použiť štýly pomocou vlastnosti textDecoration.