Tekst je najvažniji i najvidljiviji adut za svaku aplikaciju ili web stranicu, bez upotrebe teksta kreator ne može u potpunosti prenijeti svoje misli ili ispravno isporučiti informacije. Zbog svoje potrebe i važnosti, njegov stil također postaje noćna mora za većinu programera. Za statični tekst, CSS svojstva i njegov okvir puno pomažu, ali ipak postoji potreba za svojstvom koje se može dinamički primijeniti na stil. Srećom, ovo svojstvo omogućuje JavaScript koji ima naziv ' textDecoration ”.
Ovaj će blog pružiti postupak primjene stilova preko HTML elementa putem svojstva textDecoration.
Kako primijeniti stilove koristeći svojstvo textDecoration stila HTML DOM?
DOM stil “ textDecoration ' svojstvo u osnovi izvodi stiliziranje poput dodavanja ' podcrtano”, “prekocrtano”, “preko crte” i “treperenje ” preko odabranog elementa. Ovo svojstvo kada je postavljeno na ' nikakav ” uklanja zadani stil koji se primjenjuje na taj element poput oznake sidra.
Sintaksa
Sintaksa za svojstvo textDecoration u DOM stilu je:
eleObj. stil . textDecoration = 'ništa|nadcrtano|treperenje|podcrtano|početno|linijski|naslijeđeno'
Posjetite donju tablicu kako biste dobili brzi uvid u vrijednosti koje se mogu dodijeliti ' textDecoration ” svojstvo:
| Vrijednost | Obrazloženje |
|---|---|
| nikakav | Pretvorite tekst u običan format uklanjajući sve unaprijed definirane stilove; to je zadano. |
| nadcrtati | Umeće liniju iznad ili na vrh odabranog teksta. |
| treptati | Čini da tekst treperi, ali to ne podržavaju svi web preglednici. |
| naglasiti | Postavlja liniju ispod ili na dno odabranog teksta. |
| početni | Postavite primijenjeno svojstvo na zadanu vrijednost koja je u našem slučaju ništa. |
| line-through | Crtu postavite u središte teksta, tj. između teksta. |
| nasljeđuješ | Nasljeđuje svojstvo primijenjeno na korijenski ili roditeljski element. |
Sada, pogledajmo proces implementacije i njegov učinak na tekst za svaku vrijednost ' textDecoration ” vlasništvo.
Primjer 1: Svojstvo “textDecoration = none”.
Praktična provedba “ textDecoration ' svojstvo koje ima vrijednost ' nikakav ” bit će objašnjeno u kodu u nastavku:
< tijelo >
< centar >
< h1 stil = 'boja: kadetplava;' > Linux < / h1 >
< dugme na klik = 'Primjenjivač()' > Aplikator < / dugme >
< str > Kada je vrijednost svojstva textDecoration postavljena na ništa: < / str >
< h3 iskaznica = 'upotreba' stil = 'text-decoration: overline;' > Ciljani element < / h3 >
< / centar >
< skripta >
funkcija Applier() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / skripta >
< / tijelo >
Objašnjenje gore navedenog koda:
- Prvo upotrijebite '< dugme >” za stvaranje gumba i dodjeljivanje slušatelja događaja od “ na klik ”. Ovaj slušatelj događaja pokreće JavaScript funkciju pod nazivom ' Aplikator ”.
- Zatim stvorite ciljani element ' h3 ' i dodijelite mu jedinstveni ID od ' slučaj upotrebe ”. Također primijenite CSS ' tekst-ukras ' svojstvo koje ima vrijednost ' nadcrtati ' uz pomoć ' stil ” atribut.
- Sada unesite ' Aplikator ()” tijelo funkcije i odaberite ciljani element preko njegovog ID-a “ slučaj upotrebe ' i priložite stil ' textDecoration ” vlasništvo.
- Nakon toga svojstvu dodijelite vrijednost ' nikakav ” kako biste uklonili sve prethodno primijenjene stilove ukrašavanja teksta preko elementa.
Pogled na web stranicu nakon izvršenja gornjeg koda:
Izlaz pokazuje da se prethodni stil koji se primjenjuje na ciljani element uklanja dodjeljivanjem vrijednosti ' nikakav ”.
Primjer 2: svojstvo “textDecoration = initial”.
Donji isječak koda ilustrira implementaciju ' textDecoration ' svojstvo kada je vrijednost ' početni ” dodijeljen mu je:
< skripta >funkcija Aplikator ( ) {
dokument. getElementById ( 'upotreba' ) . stil . textDecoration = 'početni' ;
}
skripta >
Izlaz generiran nakon kompilacije gornjeg koda prikazan je u nastavku:
Gornji izlaz pokazuje da je vrijednost ukrasa teksta postavljena na zadanu vrijednost koja je ' nikakav ” i stoga su svi prije stiliziranja vraćeni.
Primjer 3: svojstvo “textDecoration = overline”.
Donji kod prikazuje praktičnu implementaciju ' textDecoration ' svojstvo kada je vrijednost ' nadcrtati ” pruža mu se:
< tijelo >< centar >
< h1 stil = 'boja: kadetplava;' > Linux < / h1 >
< dugme na klik = 'Primjenjivač()' > Aplikator < / dugme >
< str > Kada je vrijednost svojstva textDecoration postavljena na overline: < / str >
< h3 iskaznica = 'upotreba' > Ciljani element < / h3 >
< / centar >
< skripta >
funkcija Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / skripta >
< / tijelo >
Objašnjenje gornjeg koda navedeno je u nastavku:
- Prvo, ' gumb” i “h3 ” element se stvara na isti način kao i CSS svojstvo koje se primjenjuje na “h3” element je sada uklonjen.
- Dalje, unutar ' Aplikator ' odabire se ciljani element i ' textDecoration ' svojstvo koje ima vrijednost ' nadcrtati ” dodijeljen je elementu.
Izlaz nakon izvršenja gornjeg koda prikazan je u nastavku:
Izlaz pokazuje učinak ' textDecoration = prekrivanje ” nad tekstom.
Primjer 4: Svojstvo “textDecoration = underline”.
Praktična provedba teksta kada je vrijednost ' naglasiti ' dodijeljen je ' textDecoration ” imovina je navedena u nastavku:
< skripta >funkcija Aplikator ( ) {
dokument. getElementById ( 'upotreba' ) . stil . textDecoration = 'naglasiti' ;
}
skripta >
Nakon kompilacije, izlaz izgleda ovako:
Izlaz pokazuje da je redak dodan na dnu teksta.
Primjer 5: svojstvo “textDecoration = line-through”.
Vizualna implementacija ' textDecoration ' svojstvo koje ima vrijednost ' line-through ” prikazano je u nastavku:
< skripta >funkcija Aplikator ( ) {
dokument. getElementById ( 'upotreba' ) . stil . textDecoration = 'prolazni' ;
}
skripta >
Izlaz generiran za gornji kod prikazan je u nastavku:
Izlaz pokazuje učinak koji postiže ' line-through ” preko teksta ciljanog elementa.
Zaključak
HTML DOM stil “ textDecoration ” Svojstvo se posebno bavi stiliziranjem HTML elemenata putem JavaScripta za izvođenje dinamičkog stiliziranja tekstualnih elemenata. Ovom se može dodijeliti više vrijednosti textDecoration ” za izvođenje različitih varijacija stiliziranja. Ove vrijednosti su ' ništa”, “nadcrtano”, “podcrtano”, “prolazno”, “početno”, “treperenje” i “naslijedi ”. Ovaj blog je uspješno objasnio proces kojim programer može primijeniti stilove pomoću svojstva textDecoration.