Ez az útmutató a JavaScript HTML DOM Element „style” tulajdonságának célját és működését részletezi.
Hogyan működik a HTML DOM elem „stílus” tulajdonsága JavaScriptben?
A HTML DOM ' stílus ” egy csak olvasható tulajdonság, amely a hozzárendelt stílustulajdonságok alapján működik. Ezenkívül visszaadja a „ CSSStyleDeclaration ” objektum, amely az adott HTML-elem összes soron belüli stílusattribútumait tartalmazza.
Jegyzet: A „CSSStyleDeclaration” objektum tartalmazza a fejrészben meghatározott CSS-stílusattribútumokat.
Szintaxis (stílustulajdonság beállítása)
elem. stílus . ingatlan = értékA fenti szintaxis szerint a „ stílus ' tulajdonság csak egy paramétert támogat' érték ”, amely a megadott stílustulajdonság értékét jelenti.
Szintaxis (stílustulajdonság visszaadása)
elem. stílus . ingatlanValósítsuk meg gyakorlatiasan a „style” tulajdonság fentebb tárgyalt szintaxisait.
1. példa: Használja a „style” tulajdonságot egy adott HTML-elem színének beállításához
Ez a példa a ' stílus ” tulajdonság a „style” tulajdonság értékének beállításához úgy, hogy az adott HTML-elem színe megváltozzon.
HTML kód
Először menjen át a megadott HTML kódon:
< h2 > Használja a tulajdonság stílust a JavaScriptben h2 >
< h3 id = 'H3' > Második alcím. h3 >
A fenti kódsorokban:
- A ' ” A HTML címke az első alcímet határozza meg.
- A ' ” címke létrehozza a 3. szint második alcímét „H3” azonosítóval.
JavaScript kód
Ezután kövesse a megadott JavaScript kódot:
< forgatókönyv >dokumentum. getElementById ( 'H3' ) . stílus . szín = 'zöld' ;
forgatókönyv >
A fenti kódrészletben a „ document.getElementById() ' metódus eléri a mellékelt ' ' elem az azonosítóján keresztül ' H3 ' a megadott ' beállításához szín ' az elem attribútumértéke a ' stílus.szín ' ingatlan.
Kimenet
A kimenet azt mutatja, hogy a megcélzott HTML-elem vizuális megjelenítése ennek megfelelően van beállítva a „style” tulajdonság használatával.
2. példa: Használja a „style” tulajdonságot az alkalmazott „style” attribútum értékének lekéréséhez
Ebben a példában a „style” tulajdonság segít a HTML-elem hozzárendelt „style” attribútumának megtalálásában az általános szintaxis használatával (Stílustulajdonság visszaadása).
HTML kód
A HTML kód itt olvasható:
< h2 > Használja a tulajdonság stílust a JavaScriptben h2 >< h3 id = 'H3' stílus = 'háttérszín:narancs;' > A második alcím háttérszínének értéke : h3 >
< h4 id = 'demó' > h4 >
Ebben a kódban:
- A ' ” A HTML címke a „style” attribútumot használja, amely beállítja a „
” HTML elem háttérszínét.
- A ' ' címke létrehoz egy üres 4. szintű alcímet, amelynek azonosítója van ' demó ”.
JavaScript kód
Most nézze meg a megadott JavaScript kódot:
< forgatókönyv >const érték = dokumentum. getElementById ( 'H3' ) . stílus . háttérszín ;
dokumentum. getElementById ( 'demó' ) . innerHTML = érték ;
forgatókönyv >
A fent írt kódban:
- A változó ' érték ' egy ' const ' kulcsszó, amely a ' document.getElementById() ” metódus segítségével lekérheti a „
” elemet az azonosítójával az alkalmazott „style” attribútum értékének lekéréséhez és az elemre való alkalmazásához, azaz a „style” tulajdonságon keresztül a „
” elemre.
- A „document.getElementById()” metódus ismét a hozzáadott üres „
” elem eléréséhez és a hozzárendelt „style” attribútum értékének megjelenítéséhez a lekért HTML-elemhez képest, és alcímként a „ innerHTML ' ingatlan.
Kimenet
A kimenet a háttérszínt alkalmazza az elemre, és a beállított „style” attribútum értéke is ennek megfelelően kerül visszaadásra.
Következtetés
A JavaScript a ' stílus ” tulajdonság a HTML DOM elem soron belüli „style” tulajdonságainak hozzárendeléséhez és visszaadásához. A kívánt funkció megfelelő alkalmazásához további „értékre” van szükség. A beállításon és visszakeresésen kívül előnyös a meglévő „stílus” attribútum megváltoztatása is. Ez az útmutató bemutatta a HTML DOM Element stílustulajdonság fő célját, működését és gyakorlati megvalósítását.