See juhend kirjeldab JavaScripti HTML DOM-i elemendi 'stiil' eesmärki ja toimimist.
Kuidas HTML DOM-i elemendi 'stiil' atribuut JavaScriptis töötab?
HTML DOM ' stiilis ” on kirjutuskaitstud atribuut, mis töötab vastavalt eraldatud stiiliomadustele. Samuti tagastab see CSSStyleDeclaration ” objekt, mis sisaldab kõiki konkreetse HTML-elemendi tekstisiseseid stiiliatribuute.
Märge: Objekt 'CSSStyleDeclaration' sisaldab peaosas määratletud CSS-i stiiliatribuute.
Süntaks (laadi atribuudi määramine)
element. stiilis . vara = väärtusÜlaltoodud süntaksi kohaselt on ' stiilis ' atribuut toetab ainult ühte parameetrit ' väärtus ”, mis tähistab määratud stiiliomaduse väärtust.
Süntaks (laadi atribuudi tagastamine)
element. stiilis . varaRakendame ülalkirjeldatud atribuudi 'style' süntaksid praktiliselt.
Näide 1: Konkreetse HTML-i elemendi värvi määramiseks kasutage atribuuti 'style'.
See näide rakendab põhisüntaksi ' stiilis ' atribuut, et määrata atribuudi 'style' väärtus nii, et konkreetse HTML-i elemendi värvi muudetakse.
HTML-kood
Esmalt läbige antud HTML-kood:
< h2 > Kasutage JavaScriptis stiili Atribuut h2 >
< h3 id = 'H3' > Teine alapealkiri. h3 >
Ülaltoodud koodiridades:
- ' ” HTML-märgend määrab esimese alampealkirja.
- ' ” märgend loob 3. taseme teise alampealkirja, millele on määratud ID “H3”.
JavaScripti kood
Järgmisena järgige märgitud JavaScripti koodi:
< stsenaarium >dokument. getElementById ( 'H3' ) . stiilis . värvi = 'roheline' ;
stsenaarium >
Ülaltoodud koodilõigul on ' document.getElementById() ' meetod pääseb juurde kaasatud ' 'element selle ID kaudu' H3 ', et määrata määratud ' värvi ' elemendi atribuudi väärtus läbi ' stiil.värv ” vara.
Väljund
Väljund näitab, et sihitud HTML-i elemendi visuaalne esitus määratakse vastavalt atribuudi 'style' abil.
Näide 2: kasutage atribuuti 'style', et saada rakendatud atribuudi 'style' väärtus
Selles näites aitab atribuut 'style' leida HTML-elemendile määratud atribuut 'style', kasutades selle üldistatud süntaksit (Tagastab stiili atribuudi).
HTML-kood
HTML-kood on märgitud siin:
< h2 > Kasutage JavaScriptis stiili Omadus h2 >< h3 id = 'H3' stiilis = 'taustavärv:oranž;' > Teise alampealkirja taustavärvi väärtus on : h3 >
< h4 id = 'demo' > h4 >
Selles koodis:
- ' ” HTML-märgend kasutab atribuuti „style”, mis määrab HTML-elemendi „
” taustavärvi.
- ' märgend loob 4. taseme tühja alampealkirja, millel on ID demo ”.
JavaScripti kood
Nüüd vaadake antud JavaScripti koodi:
< stsenaarium >konst väärtus = dokument. getElementById ( 'H3' ) . stiilis . taustavärv ;
dokument. getElementById ( 'demo' ) . sisemine HTML = väärtus ;
stsenaarium >
Eespool kirjutatud koodis:
- Muutuja ' väärtus ' on deklareeritud tähega ' konst ' märksõna, mis rakendab märksõna ' document.getElementById() ” meetod elemendi „
” toomiseks, kasutades selle ID-d, et saada rakendatud atribuudi „style” väärtus ja rakendada see elemendile, st „
” atribuudi „style” kaudu.
- Meetodit “document.getElementById()” kasutatakse uuesti, et pääseda juurde lisatud tühjale elemendile “
” ja kuvada eraldatud atribuudi “style” väärtus toodud HTML-elemendi suhtes ning lisada see alampealkirjana “ sisemine HTML ” vara.
Väljund
Väljund rakendab elemendile taustavärvi ja vastavalt tagastatakse ka atribuudi komplekt 'style' väärtus.
Järeldus
JavaScript kasutab ' stiilis ” atribuut, et määrata ja tagastada HTML DOM-i elemendi tekstisisesed 'stiili' atribuudid. Soovitud funktsioonide rakendamiseks on vaja lisaväärtust. Lisaks seadistamisele ja allalaadimisele on kasulik ka olemasolevat atribuuti “style” muuta. See juhend demonstreeris HTML DOM-i elemendi stiili omaduse peamist eesmärki, toimimist ja praktilist rakendamist.