Acest ghid detaliază obiectivul și funcționarea proprietății „stil” Element HTML DOM în JavaScript.
Cum funcționează proprietatea „stil” a elementului HTML DOM în JavaScript?
DOM-ul HTML „ stil ” este o proprietate numai în citire care funcționează pe baza proprietăților de stil alocate în consecință. De asemenea, returnează „ CSSStyleDeclaration ” obiect care conține toate atributele de stil inline ale unui anumit element HTML.
Notă: Obiectul „CSSStyleDeclaration” conține atributele de stil CSS definite în secțiunea head.
Sintaxă (Setați o proprietate de stil)
element. stil . proprietate = valoareConform sintaxei de mai sus, „ stil „proprietatea acceptă doar un parametru” valoare ” care reprezintă valoarea proprietății de stil specificate.
Sintaxă (Return a style property)
element. stil . proprietateSă implementăm practic sintaxele discutate mai sus ale proprietății „stil”.
Exemplul 1: Utilizați proprietatea „style” pentru a seta culoarea unui anumit element HTML
Acest exemplu aplică sintaxa de bază a „ stil ” pentru a seta valoarea proprietății „style” astfel încât culoarea unui anumit element HTML să fie schimbată.
Cod HTML
Mai întâi, parcurgeți codul HTML dat:
< h2 > Utilizați stilul Proprietate în JavaScript h2 >
< h3 id = 'H3' > A doua subtitlu. h3 >
În liniile de cod de mai sus:
- „ ” Eticheta HTML specifică primul subtitlu.
- „ Eticheta ” creează al doilea subtitlu de nivelul 3 cu un id alocat „H3”.
Cod JavaScript
Apoi, urmați codul JavaScript menționat:
< scenariu >document. getElementById ( 'H3' ) . stil . culoare = 'verde' ;
scenariu >
În fragmentul de cod de mai sus, „ document.getElementById() ” metoda accesează ” inclus „element prin id-ul său „ H3 „ pentru a seta „ culoare ” valoarea atributului elementului prin intermediul „ stil.culoare ” proprietate.
Ieșire
Rezultatul arată că reprezentarea vizuală a elementului HTML vizat este setată în mod corespunzător folosind proprietatea „style”.
Exemplul 2: Utilizați proprietatea „style” pentru a obține valoarea atributului „style” aplicat
În acest exemplu, proprietatea „style” ajută la aflarea atributului „style” atribuit elementului HTML folosind sintaxa generalizată (Return a style Property).
Cod HTML
Codul HTML este menționat aici:
< h2 > Utilizați stilul Proprietate în JavaScript h2 >< h3 id = 'H3' stil = „culoare-fond:portocaliu;” > Valoarea culorii de fundal a celui de-al doilea subtitlu este : h3 >
< h4 id = 'demo' > h4 >
În acest cod:
- „ ” Eticheta HTML folosește atributul „style” care setează culoarea de fundal a elementului HTML „
”.
- „ Eticheta ” creează un subtitlu gol de nivelul 4 având un id ” demonstrație ”.
Cod JavaScript
Acum, uitați-vă la codul JavaScript dat:
< scenariu >const valoare = document. getElementById ( 'H3' ) . stil . culoare de fundal ;
document. getElementById ( 'demo' ) . innerHTML = valoare ;
scenariu >
În codul scris mai sus:
- Variabila „ valoare ” se declară cu „ const ” cuvânt cheie care aplică cuvântul „ document.getElementById() ” pentru a prelua elementul „
” folosind id-ul său pentru a obține valoarea atributului „stil” aplicat și pentru a o aplica elementului, adică „
” prin proprietatea „stil”.
- Metoda „document.getElementById()” este folosită din nou pentru a accesa elementul „
” gol adăugat și pentru a afișa valoarea atributului „stil” alocat față de elementul HTML preluat și pentru a o adăuga ca subtitlu prin intermediul „ innerHTML ” proprietate.
Ieșire
Ieșirea aplică culoarea de fundal elementului și valoarea atributului „stil” setat este, de asemenea, returnată în consecință.
Concluzie
JavaScript folosește „ stil ” pentru a atribui și returna proprietățile „stil” inline ale elementului HTML DOM. Este nevoie de o „valoare” suplimentară pentru a aplica funcționalitatea dorită în consecință. În afară de setarea și preluarea, este, de asemenea, benefic să schimbați atributul „stil” existent. Acest ghid a demonstrat obiectivul principal, funcționarea și implementarea practică a proprietății de stil HTML DOM Element.