Táto príručka podrobne popisuje cieľ a fungovanie vlastnosti „štýl“ prvku HTML DOM v jazyku JavaScript.
Ako funguje vlastnosť „štýl“ prvku HTML DOM v JavaScripte?
HTML DOM “ štýl ” je vlastnosť len na čítanie, ktorá funguje na základe pridelených vlastností štýlu. Tiež vráti „ CSSStyleDeclaration ” objekt, ktorý obsahuje všetky vložené atribúty štýlu konkrétneho prvku HTML.
Poznámka: Objekt „CSSStyleDeclaration“ obsahuje atribúty štýlu CSS definované v sekcii head.
Syntax (nastaviť vlastnosť štýlu)
element. štýl . nehnuteľnosť = hodnotuPodľa vyššie uvedenej syntaxe „ štýl 'vlastnosť podporuje iba jeden parameter' hodnotu ”, ktorá predstavuje hodnotu špecifikovanej vlastnosti štýlu.
Syntax (vrátenie vlastnosti štýlu)
element. štýl . nehnuteľnosťImplementujme vyššie diskutované syntaxe vlastnosti „style“ prakticky.
Príklad 1: Použite vlastnosť „style“ na nastavenie farby konkrétneho prvku HTML
Tento príklad aplikuje základnú syntax výrazu „ štýl ” na nastavenie hodnoty vlastnosti “style” tak, aby sa zmenila farba konkrétneho prvku HTML.
HTML kód
Najprv si prejdite daný HTML kód:
< h2 > Použite štýl Vlastnosť v JavaScripte h2 >
< h3 id = 'H3' > Druhý podnadpis. h3 >
Vo vyššie uvedených riadkoch kódu:
- ' ” HTML tag určuje prvý podnadpis.
- ' Značka ” vytvorí druhú podnadpis úrovne 3 s priradeným id „H3“.
JavaScript kód
Ďalej postupujte podľa uvedeného kódu JavaScript:
< skript >dokument. getElementById ( 'H3' ) . štýl . farba = 'zelená' ;
skript >
Vo vyššie uvedenom útržku kódu je „ document.getElementById() “ metóda pristupuje k zahrnutému “ “prvok cez jeho id” H3 “ na nastavenie špecifikovaného “ farba ” hodnota atribútu prvku cez „ štýl.farba ' nehnuteľnosť.
Výkon
Výstup ukazuje, že cieľová vizuálna reprezentácia prvku HTML je nastavená zodpovedajúcim spôsobom pomocou vlastnosti „style“.
Príklad 2: Použite vlastnosť „style“ na získanie hodnoty použitého atribútu „style“.
V tomto príklade vlastnosť „style“ pomáha pri zisťovaní priradeného atribútu „style“ prvku HTML pomocou jeho zovšeobecnenej syntaxe (Return a style Property).
HTML kód
HTML kód je uvedený tu:
< h2 > Použite štýl Vlastnosť v JavaScripte h2 >< h3 id = 'H3' štýl = 'farba pozadia:oranžová;' > Hodnota farby pozadia druhého podnadpisu je : h3 >
< h4 id = 'demo' > h4 >
V tomto kóde:
- ' Značka HTML používa atribút „style“, ktorý nastavuje farbu pozadia prvku HTML „
“.
- ' Značka “vytvorí prázdny podnadpis úrovne 4 s id” demo “.
JavaScript kód
Teraz sa pozrite na daný kód JavaScript:
< skript >konšt hodnotu = dokument. getElementById ( 'H3' ) . štýl . farba pozadia ;
dokument. getElementById ( 'demo' ) . innerHTML = hodnotu ;
skript >
Vo vyššie napísanom kóde:
- Premenná ' hodnotu “ sa deklaruje s „ konšt kľúčové slovo, ktoré používa výraz document.getElementById() ” na získanie prvku „
“ pomocou jeho id na získanie hodnoty použitého atribútu „style“ a jeho aplikovanie na prvok, t. j. „
“ prostredníctvom vlastnosti „style“.
- Metóda „document.getElementById()“ sa opäť používa na prístup k pridanému prázdnemu prvku „
“ a zobrazenie hodnoty prideleného atribútu „style“ oproti načítanému prvku HTML a jeho pripojenie ako podnadpis cez „ innerHTML ' nehnuteľnosť.
Výkon
Výstup použije farbu pozadia na prvok a podľa toho sa vráti aj hodnota nastaveného atribútu „style“.
Záver
JavaScript používa „ štýl ” na priradenie a vrátenie vložených vlastností „štýlu“ prvku HTML DOM. Vyžaduje si to dodatočnú „hodnotu“, aby sa požadovaná funkcia primerane uplatnila. Okrem nastavenia a načítania je tiež výhodné zmeniť existujúci atribút „style“. Táto príručka demonštrovala hlavný cieľ, prácu a praktickú implementáciu vlastnosti HTML DOM Element style.