Ta priročnik podrobneje opisuje cilj in delovanje lastnosti »style« elementa HTML DOM v JavaScriptu.
Kako deluje lastnost »style« elementa HTML DOM v JavaScriptu?
HTML DOM ' stil ” je lastnost samo za branje, ki deluje na podlagi ustrezno dodeljenih slogovnih lastnosti. Prav tako vrne ' CSSStyleDeclaration ”, ki vsebuje vse atribute sloga v vrstici določenega elementa HTML.
Opomba: Objekt »CSSStyleDeclaration« vsebuje atribute sloga CSS, definirane v razdelku glave.
Sintaksa (nastavi lastnost sloga)
element. stil . premoženje = vrednostV skladu z zgornjo sintakso je ' stil lastnost podpira samo en parameter vrednost «, ki predstavlja vrednost podane lastnosti sloga.
Sintaksa (vrni lastnost sloga)
element. stil . premoženjePraktično implementirajmo zgoraj obravnavane sintakse lastnosti 'style'.
Primer 1: Uporabite lastnost »style« za nastavitev barve določenega elementa HTML
Ta primer uporablja osnovno sintakso » stil ” za nastavitev vrednosti lastnosti “style” tako, da se spremeni barva določenega elementa HTML.
HTML koda
Najprej preglejte dano kodo HTML:
< h2 > Uporabite lastnost sloga v JavaScriptu h2 >
< h3 id = 'H3' > Drugi podnaslov. h3 >
V zgornjih vrsticah kode:
- ' ” Oznaka HTML določa prvi podnaslov.
- ' ” ustvari drugi podnaslov ravni 3 z dodeljenim ID-jem “H3”.
Koda JavaScript
Nato sledite navedeni kodi JavaScript:
< scenarij >dokument. getElementById ( 'H3' ) . stil . barva = 'zelena' ;
scenarij >
V zgornjem delčku kode je » document.getElementById() ' metoda dostopa do vključenih ' 'element prek njegovega id-ja' H3 , da nastavite določeno barva ' vrednost atributa elementa prek ' slog.barva ” lastnina.
Izhod
Izhod kaže, da je ciljna vizualna predstavitev elementa HTML ustrezno nastavljena z uporabo lastnosti »style«.
2. primer: uporaba lastnosti »style« za pridobitev vrednosti uporabljenega atributa »style«
V tem primeru lastnost »style« pomaga pri iskanju dodeljenega atributa »style« elementa HTML z uporabo njegove splošne sintakse (Vrni lastnost sloga).
HTML koda
Koda HTML je navedena tukaj:
< h2 > Uporabite lastnost sloga v JavaScriptu h2 >< h3 id = 'H3' stil = 'barva-ozadje:oranžna;' > Vrednost barve ozadja drugega podnaslova je : h3 >
< h4 id = 'demo' > h4 >
V tej kodi:
- ' ” Oznaka HTML uporablja atribut “style”, ki nastavi barvo ozadja elementa HTML “
”.
- ' ' ustvari prazen podnaslov ravni 4 z id ' demo ”.
Koda JavaScript
Poglejte dano kodo JavaScript:
< scenarij >konst vrednost = dokument. getElementById ( 'H3' ) . stil . Barva ozadja ;
dokument. getElementById ( 'demo' ) . notranjiHTML = vrednost ;
scenarij >
V zgoraj napisani kodi:
- Spremenljivka ' vrednost ' je deklariran z ' konst « ključna beseda, ki uporablja » document.getElementById() ” za pridobivanje elementa “
” z uporabo njegovega ID-ja za pridobitev vrednosti uporabljenega atributa “style” in njegovo uporabo za element, tj. “
” prek lastnosti “style”.
- Metoda “document.getElementById()” se ponovno uporabi za dostop do dodanega praznega elementa “
” in prikaže vrednost dodeljenega atributa “style” glede na pridobljeni element HTML ter ga doda kot podnaslov prek “ notranjiHTML ” lastnina.
Izhod
Izhod uporabi barvo ozadja za element in ustrezno vrne tudi vrednost nastavljenega atributa »style«.
Zaključek
JavaScript uporablja ' stil ” za dodelitev in vrnitev vgrajenih lastnosti “style” elementa HTML DOM. Za ustrezno uporabo želene funkcionalnosti je potrebna dodatna »vrednost«. Poleg nastavitve in pridobivanja je koristno spremeniti tudi obstoječi atribut »style«. Ta priročnik je prikazal glavni cilj, delujočo in praktično izvedbo lastnosti sloga elementa HTML DOM.