Besedilo je najpomembnejše in najbolj vidno sredstvo vsake aplikacije ali spletne strani, brez uporabe besedila ustvarjalec ne more v celoti prenesti svojih misli ali pravilno podati informacij. Zaradi svoje potrebe in pomembnosti postane tudi njegov stil nočna mora za večino razvijalcev. Pri statičnem besedilu so lastnosti CSS in njegovo ogrodje v veliko pomoč, vendar še vedno obstaja potreba po lastnosti, ki jo je mogoče dinamično uporabiti za slog. Na srečo to lastnost zagotavlja JavaScript z imenom ' textDecoration ”.
Ta spletni dnevnik bo zagotovil postopek za uporabo slogov nad elementom HTML prek lastnosti textDecoration.
Kako uporabiti sloge z lastnostjo textDecoration Style HTML DOM?
Slog DOM ' textDecoration »lastnost v bistvu izvaja slog, kot je dodajanje » podčrtaj«, »prečrtaj«, »črta skozi« in »utripaj ” nad izbranim elementom. Ta lastnost, ko je nastavljena na ' nič ” odstrani privzeti slog, ki je uporabljen nad tem elementom kot sidrna oznaka.
Sintaksa
Sintaksa za lastnost textDecoration sloga DOM je:
eleObj. stil . textDecoration = 'brez|prečrtano|utripaj|podčrtano|začetno|vrstico|podeduj'
Obiščite spodnjo tabelo, da dobite hitro predstavo o vrednostih, ki jih lahko dodelite » textDecoration ” Lastnost:
| Vrednost | Razlaga |
|---|---|
| nič | Pretvorite besedilo v navaden format in odstranite vse vnaprej določene sloge; je privzeto. |
| prečrtati | Vstavi črto čez ali na vrh izbranega besedila. |
| utripati | Omogoči utripanje besedila, vendar tega ne podpirajo vsi spletni brskalniki. |
| podčrtaj | Postavi črto pod ali na dno izbranega besedila. |
| začetnica | Uporabljeno lastnost nastavite na privzeto vrednost, ki je v našem primeru nič. |
| line-through | Črto postavite na sredino besedila, tj. med besedilo. |
| podeduješ | Podeduje lastnost, uporabljeno za korenski ali nadrejeni element. |
Zdaj pa si oglejmo postopek implementacije in njegov učinek na besedilo za vsako vrednost » textDecoration ” lastnina.
Primer 1: Lastnost »textDecoration = none«.
Praktična izvedba » textDecoration ' lastnost z vrednostjo ' nič ” bo razloženo v spodnji kodi:
< telo >
< center >
< h1 stil = 'barva: kadetsko modra;' > Linux < / h1 >
< gumb onclick = 'Applier()' > Apliator < / gumb >
< str > Ko je vrednost lastnosti textDecoration nastavljena na nič: < / str >
< h3 id = 'primer uporabe' stil = 'okras besedila: prečrtano;' > Ciljni element < / h3 >
< / center >
< scenarij >
funkcija Applier() {
document.getElementById('useCase').style.textDecoration = 'brez';
}
< / scenarij >
< / telo >
Razlaga zgoraj navedene kode:
- Najprej uporabite »< gumb >«, da ustvarite gumb in mu dodelite poslušalca dogodkov » onclick ”. Ta poslušalec dogodkov sproži funkcijo JavaScript z imenom ' Apliator ”.
- Nato ustvarite ciljni element ' h3 « in mu dodeli edinstveni ID » useCase ”. Uporabite tudi CSS ' besedilo-okras ” lastnost tega z vrednostjo ” prečrtati « s pomočjo » stil ” atribut.
- Zdaj vnesite » Apliator ()' telo funkcije in izberite ciljni element prek njegovega ID-ja ' useCase ' in priložite slog ' textDecoration ” lastnina.
- Po tem lastnosti dodelite vrednost ' nič ”, da odstranite vse vnaprej uporabljene sloge dekoracije besedila nad elementom.
Pogled spletne strani po izvedbi zgornje kode:
Izhod kaže, da se predhodno oblikovanje, ki je uporabljeno za ciljni element, odstrani tako, da se mu dodeli vrednost ' nič ”.
Primer 2: Lastnost »textDecoration = initial«.
Spodnji delček kode ponazarja izvajanje » textDecoration ' lastnost, ko je vrednost ' začetnica ” mu je dodeljeno:
< scenarij >funkcijo Apliator ( ) {
dokument. getElementById ( 'primer uporabe' ) . stil . textDecoration = 'začetnica' ;
}
scenarij >
Izhod, ustvarjen po prevajanju zgornje kode, je prikazan spodaj:
Zgornji izhod kaže, da je vrednost dekoracije besedila nastavljena na privzeto vrednost, ki je ' nič ” in zato so bili razveljavljeni vsi predstilingi.
Primer 3: Lastnost »textDecoration = overline«.
Spodnja koda prikazuje praktično izvedbo » textDecoration ' lastnost, ko je vrednost ' prečrtati ” mu je na voljo:
< telo >< center >
< h1 stil = 'barva: kadetsko modra;' > Linux < / h1 >
< gumb onclick = 'Applier()' > Apliator < / gumb >
< str > Ko je vrednost lastnosti textDecoration nastavljena na prečrtano: < / str >
< h3 id = 'primer uporabe' > Ciljni element < / h3 >
< / center >
< scenarij >
funkcija Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / scenarij >
< / telo >
Razlaga zgornje kode je navedena spodaj:
- Prvič, ' gumb' in 'h3 ” je ustvarjen na enak način kot lastnost CSS, ki je uporabljena nad “h3” element je zdaj odstranjen.
- Nato znotraj » Apliator ' je izbran ciljni element in ' textDecoration ' lastnost z vrednostjo ' prečrtati ” je dodeljen elementu.
Izhod po izvedbi zgornje kode je prikazan spodaj:
Rezultat prikazuje učinek » textDecoration = prekrivanje ” nad besedilom.
Primer 4: Lastnost »textDecoration = underline«.
Praktična izvedba besedila, ko je vrednost ' podčrtaj « je dodeljen » textDecoration ” Lastnost je navedena spodaj:
< scenarij >funkcijo Apliator ( ) {
dokument. getElementById ( 'primer uporabe' ) . stil . textDecoration = 'podčrtaj' ;
}
scenarij >
Po prevajanju je rezultat videti takole:
Izhod pokaže, da je vrstica dodana na dnu besedila.
Primer 5: Lastnost »textDecoration = line-through«.
Vizualna izvedba ' textDecoration ” nepremičnina z vrednostjo “ line-through « je prikazano spodaj:
< scenarij >funkcijo Apliator ( ) {
dokument. getElementById ( 'primer uporabe' ) . stil . textDecoration = 'preko' ;
}
scenarij >
Izhod, ustvarjen za zgornjo kodo, je prikazan spodaj:
Izhod prikazuje učinek, ki ga je naredil ' line-through ” nad ciljnim besedilom elementa.
Zaključek
Slog HTML DOM “ textDecoration ” se posebej ukvarja s stilskim oblikovanjem elementov HTML prek JavaScripta za izvedbo dinamičnega stilskega oblikovanja besedilnih elementov. Temu '' je mogoče dodeliti več vrednosti textDecoration ” za izvedbo različnih variant stilov. Te vrednosti so ' brez«, »overline«, »underline«, »line-through«, »inicial«, »blink« in »inherit« ”. Ta spletni dnevnik je uspešno razložil postopek, s katerim lahko razvijalec uporablja sloge z lastnostjo textDecoration.