Tekst on iga rakenduse või veebilehe kõige olulisem ja nähtavam vara, ilma teksti kasutamiseta ei saa looja oma mõtteid täielikult edasi anda ega teavet õigesti edastada. Oma vajaduse ja tähtsuse tõttu muutub selle stiil ka enamiku arendajate jaoks õudusunenäoks. Staatilise teksti puhul aitavad CSS-i atribuudid ja selle raamistik palju, kuid siiski on vaja omadust, mida saab dünaamiliselt stiilile rakendada. Õnneks pakub seda atribuuti JavaScript nimega ' tekstDekoratsioon ”.
See ajaveeb pakub protseduuri stiilide rakendamiseks HTML-elemendile atribuudi textDecoration kaudu.
Kuidas HTML-i DOM-i stiili tekstidekoratsiooni atribuudi abil stiile rakendada?
DOM-stiil' tekstDekoratsioon ' atribuut täidab põhimõtteliselt stiili nagu ' lisamine allajoonimine, ülejoonimine, läbijoonimine ja vilkumine ” valitud elemendi kohal. Kui see atribuut on seatud väärtusele ' mitte ühtegi ” eemaldab vaikestiili, mida sellele elemendile rakendatakse nagu ankrusildi.
Süntaks
DOM-stiilis textDecoration atribuudi süntaks on:
eleObj. stiilis . tekstDekoratsioon = 'puudub|ülejoon|vilgub|allakriipsutus|esialgne|rida-läbiv|pärima'
Külastage allolevat tabelit, et saada kiire ülevaade väärtustest, mida saab määrata ' tekstDekoratsioon ” vara:
| Väärtus | Selgitus |
|---|---|
| mitte ühtegi | Teisendage tekst tavavormingusse, eemaldades kõik eelnevalt määratletud stiilid; see on vaikeseade. |
| ülejoon | Lisab rea valitud teksti kohale või peale. |
| vilkuma | Paneb teksti vilkuma, kuid kõik veebibrauserid seda ei toeta. |
| joon alla | See asetab rea valitud teksti alla või alla. |
| esialgne | Määrake rakendatud atribuudi vaikeväärtus, mis meie puhul puudub. |
| line-through | Asetage rida teksti keskele, st teksti vahele. |
| sa pärid | Pärib juur- või emaelemendile rakendatud atribuudi. |
Nüüd vaatame üle juurutusprotsessi ja selle mõju tekstile iga väärtuse ' tekstDekoratsioon ” vara.
Näide 1: atribuut 'textDecoration = none'.
' tekstDekoratsioon ' vara, mille väärtus on ' mitte ühtegi ” selgitatakse allolevas koodis:
< keha >
< Keskus >
< h1 stiilis = 'värv: kadetsinine;' > Linux < / h1 >
< nuppu onclick = 'Rakendaja()' > Rakendaja < / nuppu >
< lk > Kui atribuudi textDecoration väärtuseks on määratud none: < / lk >
< h3 id = 'useCase' stiilis = 'text-decoration: overline;' > Sihitud element < / h3 >
< / Keskus >
< stsenaarium >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'puudub';
}
< / stsenaarium >
< / keha >
Eespool nimetatud koodi selgitus:
- Esiteks kasutage '< nuppu >' märgend, et luua nupp ja määrata sellele sündmusekuulaja onclick ”. See sündmuste kuulaja käivitab JavaScripti funktsiooni nimega ' Rakendaja ”.
- Järgmisena looge sihitud element ' h3 ja määrake sellele unikaalne ID useCase ”. Rakendage ka CSS-i ' tekst-kaunistus ' vara, mille väärtus on ' ülejoon ' abiga ' stiilis ” atribuut.
- Nüüd sisestage ' Rakendaja ()' funktsiooni keha ja valige sihitud element selle ID kaudu ' useCase ' ja lisage stiil ' tekstDekoratsioon ” vara.
- Pärast seda määrake varale väärtus ' mitte ühtegi ”, et eemaldada elemendi kohal kõik eelnevalt rakendatud tekstidekoratsiooni stiilid.
Veebilehe vaade pärast ülaltoodud koodi täitmist:
Väljund näitab, et sihitud elemendile rakendatud eelstiil eemaldatakse, määrates sellele väärtuse ' mitte ühtegi ”.
Näide 2: atribuut 'textDecoration = esialgne'.
Allolev koodilõik illustreerib ' tekstDekoratsioon ' vara, kui väärtus ' esialgne ” on sellele määratud:
< stsenaarium >funktsiooni Rakendaja ( ) {
dokument. getElementById ( 'useCase' ) . stiilis . tekstDekoratsioon = 'esialgne' ;
}
stsenaarium >
Pärast ülaltoodud koodi koostamist genereeritud väljund on näidatud allpool:
Ülaltoodud väljund näitab, et tekstikaunistuse väärtus on seatud vaikeväärtusele, mis on ' mitte ühtegi ” ja seega on kogu eelkujundamine tagasi viidud.
Näide 3: atribuut 'textDecoration = overline'.
Allolev kood näitab rakenduse praktilist rakendamist tekstDekoratsioon ' vara, kui väärtus ' ülejoon ” on sellele ette nähtud:
< keha >< Keskus >
< h1 stiilis = 'värv: kadetsinine;' > Linux < / h1 >
< nuppu onclick = 'Rakendaja()' > Rakendaja < / nuppu >
< lk > Kui atribuudi textDecoration väärtus on seatud ülejoonele: < / lk >
< h3 id = 'useCase' > Sihitud element < / h3 >
< / Keskus >
< stsenaarium >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ülejoon';
}
< / stsenaarium >
< / keha >
Ülaltoodud koodi selgitus on toodud allpool:
- Esiteks, ' nupp” ja „h3 ” element luuakse samal viisil ja CSS-i atribuut, mida rakendatakse 'h3' element on nüüd eemaldatud.
- Järgmisena, sees Rakendaja funktsioon on valitud sihitud element ja ' tekstDekoratsioon ' vara, mille väärtus on ' ülejoon ” on elemendile määratud.
Allpool kuvatakse väljund pärast ülaltoodud koodi täitmist:
Väljund näitab efekti ' textDecoration = ülejoon ” omadus teksti kohal.
Näide 4: atribuut 'textDecoration = allajoon'.
Teksti praktiline rakendamine, kui väärtus ' joon alla ” on määratud „ tekstDekoratsioon ” atribuut on märgitud allpool:
< stsenaarium >funktsiooni Rakendaja ( ) {
dokument. getElementById ( 'useCase' ) . stiilis . tekstDekoratsioon = 'alla joonitud' ;
}
stsenaarium >
Pärast koostamist näeb väljund välja järgmine:
Väljund näitab, et rida on lisatud teksti allossa.
Näide 5: atribuut 'textDecoration = läbijoon'.
' tekstDekoratsioon ' vara, mille väärtus on ' line-through ” on näidatud allpool:
< stsenaarium >funktsiooni Rakendaja ( ) {
dokument. getElementById ( 'useCase' ) . stiilis . tekstDekoratsioon = 'joon läbi' ;
}
stsenaarium >
Ülaltoodud koodi jaoks loodud väljund kuvatakse allpool:
Väljund näitab efekti, mille teeb ' line-through ” sihitud elemendi teksti kohal.
Järeldus
HTML DOM stiil ' tekstDekoratsioon ” atribuut käsitleb konkreetselt HTML-i elementide stiilimist JavaScripti kaudu, et teostada tekstielementide dünaamilist stiili. Sellele saab määrata mitu väärtust tekstDekoratsioon ” et teostada erinevaid stiilivariante. Need väärtused on ' puudub“, „ülejoon“, „allajoon“, „läbijoon“, „esialgne“, „vilgub“ ja „päri“ ”. See ajaveeb on edukalt selgitanud protsessi, mille abil arendaja saab atribuudi textDecoration abil stiile rakendada.