Tato příručka podrobně popisuje cíl a fungování vlastnosti „style“ prvku HTML DOM v JavaScriptu.
Jak funguje vlastnost „style“ prvku HTML DOM v JavaScriptu?
HTML DOM ' styl ” je vlastnost pouze pro čtení, která funguje na základě přidělených vlastností stylu. Také vrací „ CSSStyleDeclaration ” objekt, který obsahuje všechny atributy inline stylu konkrétního prvku HTML.
Poznámka: Objekt „CSSStyleDeclaration“ obsahuje atributy stylů CSS definované v sekci head.
Syntaxe (Nastavit vlastnost stylu)
živel. styl . vlastnictví = hodnotaPodle výše uvedené syntaxe je „ styl 'vlastnost podporuje pouze jeden parametr' hodnota ”, která představuje hodnotu zadané vlastnosti stylu.
Syntaxe (vrácení vlastnosti stylu)
živel. styl . vlastnictvíImplementujme výše diskutované syntaxe vlastnosti „style“ prakticky.
Příklad 1: Pomocí vlastnosti „style“ nastavte barvu konkrétního prvku HTML
Tento příklad používá základní syntaxi „ styl ” pro nastavení hodnoty vlastnosti “style” tak, aby se změnila barva konkrétního HTML elementu.
HTML kód
Nejprve si projděte daný HTML kód:
< h2 > Použijte vlastnost stylu v JavaScriptu h2 >
< h3 id = 'H3' > Druhý podnadpis. h3 >
Ve výše uvedených řádcích kódu:
- ' ” HTML tag určuje první podnadpis.
- ' Značka ” vytvoří druhý podnadpis úrovně 3 s přiřazeným id „H3“.
JavaScript kód
Dále postupujte podle uvedeného kódu JavaScript:
< skript >dokument. getElementById ( 'H3' ) . styl . barva = 'zelená' ;
skript >
Ve výše uvedeném fragmentu kódu je „ document.getElementById() “ metoda přistupuje k zahrnutému “ 'prvek přes jeho id' H3 “ pro nastavení zadaného “ barva ” hodnota atributu prvku prostřednictvím “ styl.barva ' vlastnictví.
Výstup
Výstup ukazuje, že cílená vizuální reprezentace elementu HTML je nastavena odpovídajícím způsobem pomocí vlastnosti „style“.
Příklad 2: Použijte vlastnost „style“ k získání hodnoty použitého atributu „style“.
V tomto příkladu vlastnost „style“ pomáhá zjistit přiřazený atribut „style“ prvku HTML pomocí jeho zobecněné syntaxe (Return a style Property).
HTML kód
HTML kód je uveden zde:
< h2 > Použijte vlastnost stylu v JavaScriptu h2 >< h3 id = 'H3' styl = 'barva-pozadi:oranžová;' > Hodnota barvy pozadí druhého podnadpisu je : h3 >
< h4 id = 'demo' > h4 >
V tomto kódu:
- ' Značka HTML používá atribut „style“, který nastavuje barvu pozadí prvku HTML „
“.
- ' Značka “vytváří prázdný podnadpis úrovně 4 s id” demo “.
JavaScript kód
Nyní se podívejte na daný kód JavaScript:
< skript >konst hodnota = dokument. getElementById ( 'H3' ) . styl . barva pozadí ;
dokument. getElementById ( 'demo' ) . vnitřní HTML = hodnota ;
skript >
Ve výše napsaném kódu:
- Proměnná ' hodnota “ je deklarováno s „ konst klíčové slovo, které používá document.getElementById() ” k načtení prvku „
“ pomocí jeho id pro získání hodnoty použitého atributu „style“ a jeho použití na prvek, tj. „
“ prostřednictvím vlastnosti „style“.
- Metoda „document.getElementById()“ se znovu používá pro přístup k přidanému prázdnému prvku „
“ a zobrazení hodnoty přiděleného atributu „style“ proti načtenému prvku HTML a jeho připojení jako podnadpis pomocí „ vnitřní HTML ' vlastnictví.
Výstup
Výstup použije barvu pozadí na prvek a odpovídajícím způsobem se také vrátí hodnota nastaveného atributu „style“.
Závěr
JavaScript používá „ styl ” vlastnost přiřadit a vrátit vložené vlastnosti „style“ prvku HTML DOM. Vyžaduje to další „hodnotu“, aby bylo možné odpovídajícím způsobem aplikovat požadovanou funkci. Kromě nastavení a načítání je také výhodné změnit stávající atribut „style“. Tato příručka demonstrovala hlavní cíl, pracovní a praktickou implementaci vlastnosti HTML DOM Element style.