Textul este cel mai important și mai vizibil activ pentru fiecare aplicație sau pagină web, fără utilizarea textului, creatorul nu își poate transmite pe deplin gândurile sau furniza informații în mod corespunzător. Datorită necesității și importanței sale, stilul său devine și un coșmar pentru majoritatea dezvoltatorilor. Pentru textul static, proprietățile CSS și cadrul său ajută foarte mult, dar totuși, este nevoie de o proprietate care să poată fi aplicată la stil în mod dinamic. Din fericire, această proprietate este furnizată de JavaScript având numele „ textDecorare ”.
Acest blog va oferi procedura de aplicare a stilurilor peste elementul HTML prin proprietatea textDecoration.
Cum se aplică stiluri utilizând proprietatea textDecoration stil HTML DOM?
Stilul DOM” textDecorare „proprietatea realizează, practic, stilul, cum ar fi adăugarea „ subliniere”, „supraliniere”, „liniar prin linie” și „clipire ” peste un element selectat. Această proprietate când este setată la „ nici unul ” elimină stilul implicit care este aplicat peste acel element ca o etichetă de ancorare.
Sintaxă
Sintaxa pentru proprietatea textDecoration stil DOM este:
eleObj. stil . textDecorare = „niciuna|overline|clipire|subliniere|inițial|line-through|moștenire”
Vizitați tabelul de mai jos pentru a vă face o idee rapidă despre valorile care pot fi atribuite „ textDecorare ” proprietate:
| Valoare | Explicaţie |
|---|---|
| nici unul | Convertiți textul în format simplu, eliminând toate stilurile predefinite; este implicit. |
| supraliniere | Inserează o linie peste sau deasupra textului selectat. |
| clipi | Face textul să clipească, dar nu este acceptat de toate browserele web. |
| subliniază | Plasează linia sub sau în partea de jos a textului selectat. |
| iniţială | Setați proprietatea aplicată la valoarea sa implicită, care nu este niciuna în cazul nostru. |
| line-through | Plasați linia în centrul textului, adică între text. |
| moștenești | Moștenește proprietatea aplicată elementului rădăcină sau părinte. |
Acum, să aruncăm o privire asupra procesului de implementare și a efectului acestuia asupra textului pentru fiecare valoare a „ textDecorare ” proprietate.
Exemplul 1: „textDecoration = none” proprietate
Implementarea practică a „ textDecorare ” proprietate având o valoare de ” nici unul ” va fi explicat în codul de mai jos:
< corp >
< centru >
< h1 stil = 'culoare: cadetblue;' > Linux < / h1 >
< buton onclick = „Aplicator()” > Aplicator < / buton >
< p > Când valoarea proprietății textDecoration este setată la niciunul: < / p >
< h3 id = 'utilizare caz' stil = 'text-decor: overline;' > Element vizat < / h3 >
< / centru >
< scenariu >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'niciunul';
}
< / scenariu >
< / corp >
Explicația codului de mai sus:
- În primul rând, utilizați un „< buton >” etichetă pentru a crea un buton și a-i atribui un ascultător de evenimente de „ onclick ”. Acest ascultător de evenimente declanșează o funcție JavaScript numită „ Aplicator ”.
- Apoi, creați un element vizat „ h3 ” și atribuiți-i un id unic de „ utilizare caz ”. De asemenea, aplicați CSS „ text-decor ” proprietate a acesteia având o valoare de ” supraliniere ' cu ajutorul ' stil ” atribut.
- Acum, introduceți „ Aplicator ()” corpul funcției și selectați elementul vizat prin id-ul său „ utilizare caz ” și atașați stilul ” textDecorare ” proprietate.
- După aceea, atribuiți proprietății o valoare „ nici unul ” pentru a elimina orice stil de decor text pre-aplicat peste element.
Vizualizarea paginii web după executarea codului de mai sus:
Ieșirea arată că pre-stilizarea care este aplicată pe elementul vizat este eliminată prin atribuirea unei valori de „ nici unul ”.
Exemplul 2: „textDecoration = initial” proprietate
Fragmentul de cod de mai jos ilustrează implementarea programului „ textDecorare ” proprietate când valoarea “ iniţială ” i se atribuie:
< scenariu >funcţie Aplicator ( ) {
document. getElementById ( 'utilizare caz' ) . stil . textDecorare = 'iniţială' ;
}
scenariu >
Ieșirea generată după compilarea codului de mai sus este prezentată mai jos:
Rezultatul de mai sus arată că valoarea decorului textului este setată la valoarea sa implicită, care este „ nici unul ” și, prin urmare, toate pre-styling-ul a fost inversată.
Exemplul 3: proprietatea „textDecoration = overline”.
Codul de mai jos arată implementarea practică a programului „ textDecorare ” proprietate când valoarea “ supraliniere ” i se oferă:
< corp >< centru >
< h1 stil = 'culoare: cadetblue;' > Linux < / h1 >
< buton onclick = „Aplicator()” > Aplicator < / buton >
< p > Când valoarea proprietății textDecoration este setată la supraliniu: < / p >
< h3 id = 'utilizare caz' > Element vizat < / h3 >
< / centru >
< scenariu >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / scenariu >
< / corp >
Explicația codului de mai sus este prezentată mai jos:
- În primul rând, „ butonul” și „h3 ” elementul este creat în același mod și proprietatea CSS care este aplicată peste „h3” elementul este acum eliminat.
- În continuare, în interiorul „ Aplicator funcția ” elementul vizat este selectat și „ textDecorare ” proprietate având o valoare de ” supraliniere ” este atribuit elementului.
Ieșirea după executarea codului de mai sus este afișată mai jos:
Ieșirea arată efectul „ textDecoration = overline ” proprietate asupra textului.
Exemplul 4: „textDecoration = underline” proprietate
Implementarea practică a textului atunci când valoarea „ subliniază ” este atribuit „ textDecorare ” proprietatea este menționată mai jos:
< scenariu >funcţie Aplicator ( ) {
document. getElementById ( 'utilizare caz' ) . stil . textDecorare = 'subliniat' ;
}
scenariu >
După compilare, rezultatul arată astfel:
Rezultatul arată că linia este adăugată în partea de jos a textului.
Exemplul 5: proprietatea „textDecoration = line-through”.
Implementarea vizuală a „ textDecorare ” proprietate având valoarea ” line-through ” este prezentat mai jos:
< scenariu >funcţie Aplicator ( ) {
document. getElementById ( 'utilizare caz' ) . stil . textDecorare = 'line-through' ;
}
scenariu >
Ieșirea generată pentru codul de mai sus este afișată mai jos:
Ieșirea arată efectul realizat de „ line-through ” peste textul elementului vizat.
Concluzie
Stilul HTML DOM „ textDecorare ” proprietatea se ocupă în mod specific de stilarea elementelor HTML prin JavaScript pentru a realiza stilarea dinamică a elementelor de text. Pot fi atribuite mai multe valori acestui „ textDecorare ” pentru a efectua diferite variații de styling. Aceste valori sunt „ niciunul”, „supraliniere”, „subliniere”, „liniar prin linie”, „inițial”, „clipire” și „moștenire ”. Acest blog a explicat cu succes procesul prin care dezvoltatorul poate aplica stiluri folosind proprietatea textDecoration.