Comment changer l'attribut de style d'un élément à l'aide de JavaScript?

Le modèle d'objet de document (DOM) fournit une fonctionnalité pour contrôler les styles dynamiquement dans le développement Web. Par exemple, il s'intègre à JavaScript pour offrir une accessibilité pour modifier les propriétés des éléments. Il est utile de modifier la couleur, l'arrière-plan et la taille du texte dans différentes applications du monde réel. Dans cet article, vous modifierez les attributs de style d'un élément en utilisant JavaScript.

Comment changer l'attribut de style d'un élément dynamiquement.

Il est facile de modifier l'attribut de style d'un élément en utilisant JavaScript. Le fonctionnement de cette conversion est le suivant. Premièrement, getElementbyid est utilisé pour accéder aux éléments des objets de document. Après cela, un bouton est créé qui se produit si le client l'a appuyé sur. Par conséquent, la propriété d'un élément spécifique est accessible et l'utilisateur modifie dynamiquement l'attribut de style d'un élément.

Syntaxe

élément.style.PropertyName = "PropertyValue";

Paramètres

La description des paramètres est la suivante:

• nom de la propriété: spécifie le nom de propriété telle que couleur, taille de police, etc.
• valeur de la propriété: représente la valeur à affecter à la propriété d'un élément, E, G, «Red».

Exemple

Un exemple est adapté pour modifier la couleur du texte en accédant à l'attribut de style d'un élément. Le code est donné ci-dessous en considérant le changement dynamique des attributs de style.

Code

Un exemple pour modifier les propriétés dynamiques

Bienvenue dans JavaScript World "

La description du code est expliquée dans un ordre logique.

• Un bouton est créé en passant la valeur "Appuie sur le bouton".
• UN "PressBtn ()«La méthode est attachée à ce bouton déclenché lorsqu'il est appelé.
• Après cela, la méthode ci-dessus "PressBtn ()"Est écrit à l'intérieur Mots clés.
• Dans cette méthode, myélement la variable est utilisée pour enregistrer les attributs d'élément.
• Enfin, les attributs de style de cet élément sont modifiés dynamiquement lorsque le PressBtn () la méthode est appelée.

Sortir

Après avoir appuyé sur le bouton "Appuie sur le bouton", le PressBtn () la méthode est déclenchée, ce qui modifie dynamiquement l'attribut de style de cet élément spécifique.

Enfin, la couleur du texte noir de "Bienvenue à JavaScript"Est changé en rouge dans le navigateur en utilisant le javascript PressBtn () méthode.

Conclusion:

Tout d'abord, l'élément est accessible à l'aide du GetElementById, puis du document.style.la propriété est utilisée pour modifier l'attribut de style de l'élément. Enfin, un bouton y est associé, et lorsque ce bouton a appuyé, le style de l'élément change. Cet article montre la méthode possible pour convertir l'attribut de style en javascript.