Teksts ir vissvarīgākais un redzamākais katras lietojumprogrammas vai tīmekļa lapas īpašums, jo bez teksta izmantošanas veidotājs nevar pilnībā nodot savas domas vai pareizi sniegt informāciju. Tā nepieciešamības un svarīguma dēļ tā stils arī kļūst par murgu lielākajai daļai izstrādātāju. Statiskajam tekstam CSS rekvizīti un tā ietvars ļoti palīdz, taču tomēr ir nepieciešams rekvizīts, ko var dinamiski lietot stilam. Par laimi, šo īpašumu nodrošina JavaScript ar nosaukumu “ tekstsDekorēšana ”.
Šis emuārs nodrošinās procedūru stilu pielietošanai HTML elementā, izmantojot rekvizītu textDecoration.
Kā lietot stilus, izmantojot HTML DOM stila teksta noformējuma īpašumu?
DOM stils ' tekstsDekorēšana Īpašums pamatā veic stilu, piemēram, pievienošanu pasvītrot, 'pārsvītrot', 'pārsvītrot' un 'mirgot'. ” virs atlasītā elementa. Šis rekvizīts, kad iestatīts uz “ neviens ” noņem noklusējuma stilu, kas tiek lietots šim elementam kā enkura tags.
Sintakse
DOM stila textDecoration rekvizīta sintakse ir:
eleObj. stils . tekstsDekorēšana = 'nav|pārsvītrot|mirgot|pasvītrot|sākotnēji|pārslēgts|mantot'
Apmeklējiet zemāk esošo tabulu, lai iegūtu ātru priekšstatu par vērtībām, kuras var piešķirt ' tekstsDekorēšana ” īpašums:
| Vērtība | Paskaidrojums |
|---|---|
| neviens | Konvertējiet tekstu vienkāršā formātā, noņemot visu iepriekš definēto stilu; tas ir noklusējuma. |
| overline | Ievieto rindu virs vai virs atlasītā teksta. |
| mirkšķināt | Liek tekstam mirgot, taču to neatbalsta visas tīmekļa pārlūkprogrammas. |
| pasvītrot | Tas novieto līniju zem atlasītā teksta vai tā apakšā. |
| sākotnējā | Iestatiet lietotajam īpašumam tā noklusējuma vērtību, kas mūsu gadījumā nav neviena. |
| līnijas cauri | Novietojiet rindiņu teksta centrā, t.i., starp tekstu. |
| tu manto | Pārmanto saknes vai vecākelementam lietoto rekvizītu. |
Tagad apskatīsim ieviešanas procesu un tā ietekmi uz tekstu katrai ' tekstsDekorēšana ” īpašums.
1. piemērs: Rekvizīts “textDecoration = nav”.
“ tekstsDekorēšana 'īpašums, kura vērtība ir ' neviens ” tiks izskaidrots zemāk esošajā kodā:
< ķermeni >
< centrs >
< h1 stils = 'krāsa: kadetzila;' > Linux < / h1 >
< pogu onclick = 'Aplikators()' > Lietojumprogramma < / pogu >
< lpp > Ja rekvizīta textDecoration vērtība ir iestatīta uz None: < / lpp >
< h3 id = 'izmantot gadījumu' stils = 'text-decoration: overline;' > Mērķa elements < / h3 >
< / centrs >
< skripts >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'nav';
}
< / skripts >
< / ķermeni >
Iepriekš minētā koda skaidrojums:
- Pirmkārt, izmantojiet “< pogu >” tagu, lai izveidotu pogu un piešķirtu tai notikumu uztvērēju onclick ”. Šis notikumu uztvērējs aktivizē JavaScript funkciju ar nosaukumu ' Lietojumprogramma ”.
- Pēc tam izveidojiet mērķētu elementu ' h3 ' un piešķiriet tai unikālu ID izmantot gadījumu ”. Izmantojiet arī CSS ' teksta dekorēšana 'īpašums tam, kura vērtība ir ' overline ' ar '' palīdzību stils ” atribūts.
- Tagad ievadiet ' Lietojumprogramma ()' funkcijas pamattekstu un atlasiet mērķelementu, izmantojot tā ID ' izmantot gadījumu un pievienojiet stilu ' tekstsDekorēšana ” īpašums.
- Pēc tam piešķiriet īpašumam vērtību “ neviens ”, lai noņemtu iepriekš lietoto teksta dekorēšanas stilu virs elementa.
Tīmekļa lapas skats pēc iepriekš minētā koda izpildes:
Izvadē tiek parādīts iepriekšējais stils, kas tiek lietots atlasītajam elementam, tiek noņemts, piešķirot tam vērtību “ neviens ”.
2. piemērs: Rekvizīts “textDecoration = iniciāls”.
Tālāk redzamais koda fragments ilustrē 'ieviešanu' tekstsDekorēšana ' īpašums, ja vērtība ' sākotnējā ” ir tam piešķirts:
< skripts >funkciju Lietojumprogramma ( ) {
dokumentu. getElementById ( 'izmantot gadījumu' ) . stils . tekstsDekorēšana = 'sākotnējais' ;
}
skripts >
Izvade, kas ģenerēta pēc iepriekš minētā koda apkopošanas, ir parādīta zemāk:
Iepriekš redzamā izvade parāda, ka teksta dekorācijas vērtība ir iestatīta uz noklusējuma vērtību, kas ir “ neviens ” un līdz ar to viss iepriekšējais stils ir atjaunots.
3. piemērs: rekvizīts “textDecoration = overline”.
Tālāk redzamais kods parāda ' tekstsDekorēšana 'īpašums, ja vērtība ' overline ” tiek nodrošināts:
< ķermeni >< centrs >
< h1 stils = 'krāsa: kadetzila;' > Linux < / h1 >
< pogu onclick = 'Aplikators()' > Lietojumprogramma < / pogu >
< lpp > Ja rekvizīta textDecoration vērtība ir iestatīta uz pārslēgšanu: < / lpp >
< h3 id = 'izmantot gadījumu' > Mērķa elements < / h3 >
< / centrs >
< skripts >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / skripts >
< / ķermeni >
Iepriekš minētā koda skaidrojums ir norādīts zemāk:
- Pirmkārt, ' poga” un “h3 ” elements tiek izveidots tādā pašā veidā un CSS rekvizīts, kas tiek lietots virs “h3” elements tagad ir noņemts.
- Tālāk sadaļā “ Lietojumprogramma ' funkcija ir atlasīts mērķētais elements un ' tekstsDekorēšana 'īpašums, kura vērtība ir ' overline ” ir piešķirts elementam.
Izvade pēc iepriekš minētā koda izpildes tiek parādīta zemāk:
Izvade parāda “ textDecoration = overline ” īpašums virs teksta.
4. piemērs: Rekvizīts “textDecoration = pasvītrojums”.
Teksta praktiskā īstenošana, ja vērtība “ pasvītrot ' ir piešķirts ' tekstsDekorēšana ” īpašums ir norādīts zemāk:
< skripts >funkciju Lietojumprogramma ( ) {
dokumentu. getElementById ( 'izmantot gadījumu' ) . stils . tekstsDekorēšana = 'pasvītrot' ;
}
skripts >
Pēc kompilācijas izvade izskatās šādi:
Izvade parāda, ka rindiņa ir pievienota teksta apakšā.
5. piemērs: rekvizīts “textDecoration = line-through”.
“ tekstsDekorēšana 'īpašums, kura vērtība ir ' līnijas cauri ” ir parādīts zemāk:
< skripts >funkciju Lietojumprogramma ( ) {
dokumentu. getElementById ( 'izmantot gadījumu' ) . stils . tekstsDekorēšana = 'caurlaide' ;
}
skripts >
Iepriekšminētajam kodam ģenerētā izvade tiek parādīta zemāk:
Izvade parāda efektu, ko nodrošina ' līnijas cauri ” virs atlasītā elementa teksta.
Secinājums
HTML DOM stils ' tekstsDekorēšana ” īpašums īpaši attiecas uz HTML elementu stilu, izmantojot JavaScript, lai teksta elementiem veiktu dinamisku stilu. Šim 'var piešķirt vairākas vērtības tekstsDekorēšana ”, lai veiktu dažādas stila variācijas. Šīs vērtības ir ' nav”, “pārsvītrots”, “pasvītrots”, “izsvītrojums”, “sākotnējais”, “mirgo” un “mantots” ”. Šajā emuārā ir veiksmīgi izskaidrots process, kādā izstrādātājs var lietot stilus, izmantojot rekvizītu textDecoration.