W tym przewodniku szczegółowo omówiono cel i działanie właściwości „style” elementu HTML DOM w JavaScript.
Jak działa właściwość „style” elementu HTML DOM w JavaScript?
DOM HTML „ styl ” to właściwość tylko do odczytu, która działa odpowiednio w oparciu o przydzielone właściwości stylizacji. Zwraca również „ CSSStyleDeklaracja ”, który zawiera wszystkie atrybuty stylu wbudowanego określonego elementu HTML.
Notatka: Obiekt „CSSStyleDeclaration” zawiera atrybuty stylów CSS zdefiniowane w sekcji head.
Składnia (ustaw właściwość stylu)
element. styl . nieruchomość = wartośćZgodnie z powyższą składnią „ styl ”właściwość obsługuje tylko jeden parametr” wartość ”, która reprezentuje wartość określonej właściwości stylizacji.
Składnia (zwróć właściwość stylu)
element. styl . nieruchomośćZaimplementujmy praktycznie omówioną powyżej składnię właściwości „style”.
Przykład 1: Użyj właściwości „style”, aby ustawić kolor określonego elementu HTML
W tym przykładzie zastosowano podstawową składnię „ styl ”, aby ustawić wartość właściwości „style” w taki sposób, że kolor określonego elementu HTML zostanie zmieniony.
Kod HTML
Najpierw przejrzyj podany kod HTML:
< h2 > Użyj stylu Property w JavaScript h2 >
< identyfikator h3 = „H3” > Drugi podtytuł. h3 >
W powyższych liniach kodu:
- „ ” Znacznik HTML określa pierwszy podtytuł.
- „ ” tworzy drugi podtytuł poziomu 3 z przypisanym identyfikatorem „H3”.
Kod JavaScript
Następnie postępuj zgodnie z podanym kodem JavaScript:
< scenariusz >dokument. getElementById ( „H3” ) . styl . kolor = 'zielony' ;
scenariusz >
W powyższym fragmencie kodu „ document.getElementById() ” metoda uzyskuje dostęp do dołączonych „ ”element poprzez jego identyfikator” H3 ”, aby ustawić określony kolor ” wartość atrybutu elementu poprzez „ styl.kolor ' nieruchomość.
Wyjście
Dane wyjściowe pokazują, że docelowa reprezentacja wizualna elementu HTML jest odpowiednio ustawiona za pomocą właściwości „style”.
Przykład 2: Użyj właściwości „style”, aby uzyskać wartość zastosowanego atrybutu „style”.
W tym przykładzie właściwość „style” pomaga znaleźć przypisany atrybut „style” elementu HTML przy użyciu jego uogólnionej składni (Zwróć właściwość stylu).
Kod HTML
Kod HTML jest podany tutaj:
< h2 > Użyj stylu Property w JavaScript h2 >< identyfikator h3 = „H3” styl = „kolor tła: pomarańczowy;” > Wartość drugiego koloru tła podtytułu to : h3 >
< identyfikator h4 = 'próbny' > h4 >
W tym kodzie:
- „ ” Tag HTML używa atrybutu „style”, który ustawia kolor tła elementu HTML „
”.
- „ tag ” tworzy pusty podtytuł poziomu 4 o identyfikatorze „ próbny ”.
Kod JavaScript
Teraz spójrz na podany kod JavaScript:
< scenariusz >konst wartość = dokument. getElementById ( „H3” ) . styl . kolor tła ;
dokument. getElementById ( 'próbny' ) . wewnętrzny HTML = wartość ;
scenariusz >
W powyższym kodzie:
- Zmienna „ wartość ” jest zadeklarowane z „ konst ” słowo kluczowe, które stosuje „ document.getElementById() ” do pobrania elementu „
” przy użyciu jego identyfikatora w celu uzyskania wartości zastosowanego atrybutu „style” i zastosowania go do elementu, tj. „
” za pośrednictwem właściwości „style”.
- Metoda „document.getElementById()” jest ponownie używana w celu uzyskania dostępu do dodanego pustego elementu „
” i wyświetlenia wartości przydzielonego atrybutu „style” względem pobranego elementu HTML i dołączenia go jako podtytułu poprzez „ wewnętrzny HTML ' nieruchomość.
Wyjście
Dane wyjściowe stosują kolor tła do elementu i odpowiednio zwracana jest również wartość ustawionego atrybutu „style”.
Wniosek
JavaScript używa „ styl ”, aby przypisać i zwrócić wbudowane właściwości „stylu” elementu HTML DOM. Wymaga dodatkowej „wartości”, aby odpowiednio zastosować pożądaną funkcjonalność. Oprócz ustawiania i pobierania, korzystna jest również zmiana istniejącego atrybutu „style”. W tym przewodniku przedstawiono główny cel, działanie i praktyczną implementację właściwości stylu elementu HTML DOM.