Ovaj vodič razrađuje cilj i rad svojstva 'style' HTML DOM elementa u JavaScriptu.
Kako svojstvo “style” HTML DOM elementa radi u JavaScriptu?
HTML DOM ' stil ” je svojstvo samo za čitanje koje funkcionira na temelju dodijeljenih stilskih svojstava u skladu s tim. Također, vraća ' CSSStyleDeclaration ” objekt koji sadrži sve ugrađene atribute stila određenog HTML elementa.
Bilješka: Objekt 'CSSStyleDeclaration' sadrži atribute CSS stila definirane u odjeljku zaglavlja.
Sintaksa (postavite svojstvo stila)
element. stil . vlasništvo = vrijednostPrema gornjoj sintaksi, ' stil ' svojstvo podržava samo jedan parametar ' vrijednost ” koja predstavlja vrijednost navedenog stilskog svojstva.
Sintaksa (vrati svojstvo stila)
element. stil . vlasništvoIdemo praktično implementirati gore razmotrenu sintaksu svojstva 'style'.
Primjer 1: Koristite svojstvo “style” za postavljanje boje određenog HTML elementa
Ovaj primjer primjenjuje osnovnu sintaksu ' stil ” za postavljanje vrijednosti svojstva “style” tako da se promijeni boja određenog HTML elementa.
HTML kôd
Prvo prođite kroz dati HTML kod:
< h2 > Koristite svojstvo stila u JavaScriptu h2 >
< h3 id = 'H3' > Drugi podnaslov. h3 >
U gornjim linijama koda:
- ' ” HTML oznaka specificira prvi podnaslov.
- ' ” stvara drugi podnaslov razine 3 s dodijeljenim ID-om “H3”.
JavaScript kod
Zatim slijedite navedeni JavaScript kôd:
< skripta >dokument. getElementById ( 'H3' ) . stil . boja = 'zeleno' ;
skripta >
U gornjem isječku koda, ' document.getElementById() ' metoda pristupa uključenom ' 'element preko njegovog ID-a' H3 ” za postavljanje navedenog “ boja ' vrijednost atributa elementa preko ' stil.boja ” vlasništvo.
Izlaz
Izlaz pokazuje da je ciljani vizualni prikaz HTML elementa postavljen u skladu s tim pomoću svojstva 'style'.
Primjer 2: Upotreba svojstva 'style' za dobivanje vrijednosti primijenjenog atributa 'style'
U ovom primjeru, svojstvo 'style' pomaže u pronalaženju dodijeljenog atributa 'style' HTML elementa pomoću njegove generalizirane sintakse (Vrati svojstvo stila).
HTML kôd
HTML kod je naveden ovdje:
< h2 > Koristite svojstvo stila u JavaScriptu h2 >< h3 id = 'H3' stil = 'boja-pozadine:narančasta;' > Vrijednost pozadinske boje drugog podnaslova je : h3 >
< h4 id = 'demo' > h4 >
U ovom kodu:
- ' ” HTML oznaka koristi atribut “style” koji postavlja boju pozadine HTML elementa “
”.
- ' ' oznaka stvara prazan podnaslov razine 4 koji ima ID ' demo ”.
JavaScript kod
Sada pogledajte dati JavaScript kôd:
< skripta >konst vrijednost = dokument. getElementById ( 'H3' ) . stil . boja pozadine ;
dokument. getElementById ( 'demo' ) . unutarnjiHTML = vrijednost ;
skripta >
U gore napisanom kodu:
- Varijabla ' vrijednost ” se deklarira sa “ konst ' ključna riječ koja primjenjuje ' document.getElementById() ” za dohvaćanje elementa “
” koristeći njegov ID za dobivanje vrijednosti primijenjenog atributa “style” i njegovu primjenu na element, tj. “
” putem svojstva “style”.
- Metoda “document.getElementById()” ponovno se koristi za pristup dodanom praznom elementu “
” i prikaz vrijednosti dodijeljenog atributa “style” naspram dohvaćenog HTML elementa i njegovo dodavanje kao podnaslov putem “ unutarnjiHTML ” vlasništvo.
Izlaz
Izlaz primjenjuje boju pozadine na element i vrijednost postavljenog atributa 'style' također se vraća u skladu s tim.
Zaključak
JavaScript koristi ' stil ” za dodjelu i vraćanje ugrađenih svojstava “style” HTML DOM elementa. Zahtijeva dodatnu 'vrijednost' za primjenu željene funkcionalnosti u skladu s tim. Osim postavljanja i dohvaćanja, također je korisno promijeniti postojeći atribut “style”. Ovaj vodič pokazao je glavni cilj, radnu i praktičnu implementaciju svojstva stila HTML DOM elementa.