HTML DOM Acronim dla modelu obiektu dokumentu to interfejs programowania dokumentów napisanych w HTML i XML. Zapewnia logiczną strukturę dokumentów. HTML DOM określa, w jaki sposób dokumenty HTML można ocenić i zmienić. Za pomocą HTML DOM możesz zmienić styl elementów HTML za pośrednictwem JavaScript.

Właściwość stylu HTML DOM jest używana w celu zmiany stylu elementów HTML.

Własność stylu HTML DOM

Atrybut stylu elementu HTML jest reprezentowany przez obiekt CSSSYLEDECLARZU. Aby zwrócić ten obiekt CSSSYLEDECLARZUCJA, właściwość stylu jest używana. Ta właściwość służy do uzyskania lub ustawiania stylu elementów za pomocą różnych właściwości CSS.

Składnia

Składnia właściwości HTML DOM jest podana w następujący sposób.

Jeśli po prostu chcesz uzyskać właściwość stylu, użyj następującej składni.

Jeśli jednak chcesz ustawić właściwość stylu, użyj podanej składni

Teraz, gdy mamy podstawowe zrozumienie tego, czym jest właściwość stylu HTML DOM. Teraz zbadamy kilka istotnych przykładów.

Zmiana stylu HTML

Dane przykłady pokazują, w jaki sposób możemy zmienić styl elementów HTML za pomocą JavaScript.

Przykład 1
Załóżmy, że chcesz zmienić kolor

element za pomocą jego identyfikatora.

Właściwość stylu html DOM

Właściwość stylu html DOM

W powyższym przykładzie najpierw po prostu zdefiniowaliśmy dwa

elementy i przypisali im unikalny identyfikator.

Właściwość stylu html DOM

Właściwość stylu html DOM

Następnie zmieniliśmy kolor

element z id = ”para2”. W poniższym fragmencie kodu, w którym po prostu otrzymujemy pożądany element przez jego identyfikator i zmieniamy jego kolor na czerwony.

Oto jak wyglądało to przed zmianą koloru.

Po zmianie koloru.

Przykład 2
Załóżmy, że chcesz zmienić kolor, a także rodzinę czcionki

element za pomocą jego identyfikatora.

Uczenie się HTML DOM

Uczenie się HTML DOM

W powyższym przykładzie najpierw po prostu zdefiniowaliśmy dwa

elementy i przypisali im unikalny identyfikator.

Uczenie się HTML DOM

Uczenie się HTML DOM

Następnie zmieniliśmy kolor i rodzinę czcionki

element z id = ”Head2". W poniższym kodzie, w którym po prostu otrzymujemy pożądany element przez jego identyfikator i zmieniamy jego kolor na rodzinę niebieską i czcionką na Arial.

Błąd geshi: Geshi nie mógł znaleźć języka Jacascript (za pomocą ścieżki/home/nginx/domeny/linuxhint.com/public/WP-Content/Plugins/CodeColorer/lib/geshi/) (kod 2)

Oto jak wyglądało to przed zmianą koloru i rodziny czcionek.

Po zmianie rodziny i rodziny czcionek wygląda tak.

Wniosek

Aby zmienić styl elementów HTML za pomocą JavaScript, używamy właściwości stylu HTML DOM. Właściwość HTML DOM pozwala uzyskać lub ustawić styl elementu HTML. Mogą istnieć różne podejścia do użycia tej właściwości w celu zmiany stylu elementów HTML. Ten samouczek obejmuje właściwość stylu HTML DOM i różne podejścia, które można wykorzystać do zmiany stylu elementów HTML.