L'acronyme HTML DOM pour le modèle d'objet de document est une interface de programmation pour les documents écrits en HTML et XML. Il fournit une structure logique aux documents. HTML DOM définit comment les documents HTML peuvent être évalués et modifiés. En utilisant HTML DOM, vous pouvez modifier le style des éléments HTML via JavaScript.

La propriété de style de HTML DOM est utilisée dans le but de modifier le style des éléments HTML.

Propriété de style de HTML DOM

Un attribut de style d'un élément HTML est représenté par un objet CSSStyledEclartation. Afin de retourner cet objet CSSStyleDeClartation, la propriété de style est utilisée. Cette propriété est utilisée pour obtenir ou définir le style d'éléments en utilisant diverses propriétés CSS.

Syntaxe

La syntaxe de la propriété de style HTML DOM est donnée comme suit.

Si vous souhaitez simplement obtenir une propriété de style, utilisez la syntaxe suivante.

Cependant, si vous souhaitez définir une propriété de style, utilisez la syntaxe donnée

Maintenant que nous avons une compréhension de base de ce qu'est la propriété de style HTML DOM. Nous allons maintenant explorer quelques exemples pertinents.

Changer le style HTML

Les exemples donnés montrent comment nous pouvons changer le style des éléments HTML à l'aide de JavaScript.

Exemple 1
Supposons que vous voulez changer la couleur de

élément utilisant son identifiant.

Propriété de style HTML DOM

Propriété de style HTML DOM

Dans l'exemple ci-dessus, nous avons d'abord défini deux

éléments et leur a attribué une pièce d'identité unique.

Propriété de style HTML DOM

Propriété de style HTML DOM

Nous avons ensuite changé la couleur de

élément avec id = "para2". Dans le code de code suivant où nous obtenons simplement notre élément souhaité par son identifiant et changeant sa couleur en rouge.

Voici à quoi cela ressemblait avant de changer la couleur.

Après avoir changé la couleur.

Exemple 2
Supposons que vous voulez changer la couleur ainsi que la famille de la police de

élément utilisant son identifiant.

Apprendre HTML DOM

Apprendre HTML DOM

Dans l'exemple ci-dessus, nous avons d'abord défini deux

éléments et leur a attribué une pièce d'identité unique.

Apprendre HTML DOM

Apprendre HTML DOM

Nous avons ensuite changé la couleur et la famille des polices de

élément avec id = ”head2". Dans le code de code suivant où nous obtenons simplement notre élément souhaité par son identifiant et changeant sa couleur en famille bleu et police en Arial.

Erreur Geshi: Geshi n'a pas pu trouver la langue jacascript (en utilisant le chemin / home / nginx / domaines / linuxhint.com / public / wp-content / plugins / codecolorer / lib / geshi /) (code 2)

Voici à quoi cela ressemblait avant de changer la couleur et la famille des polices.

Après avoir changé la famille des couleurs et des polices, il ressemble à ceci.

Conclusion

Pour modifier le style des éléments HTML à l'aide de JavaScript, nous utilisons la propriété de style HTML DOM. La propriété de style HTML DOM vous permet d'obtenir ou de définir le style d'un élément HTML. Il peut y avoir différentes approches pour utiliser cette propriété afin de modifier le style des éléments HTML. Ce tutoriel couvre la propriété de style HTML DOM et différentes approches qui peuvent être utilisées pour modifier le style des éléments HTML.