Définir la propriété CSS en JavaScript

JavaScript est l'un des principaux langages et technologies de script du World Wide Web. C'est un langage de programmation exécutant dynamiquement. CSS est la langue utilisée pour contrôler le style des documents écrits dans des langages de balisage comme HTML et XHTML.

Les propriétés CSS peuvent être appliquées à un code écrit en JavaScript dans un document HTML facilement en accédant à l'élément sur lequel la propriété doit être appliquée via JavaScript et en appliquant directement la propriété CSS.

Définition de la propriété CSS en JavaScript

Prenons un exemple de code HTML simple pour formater le document JavaScript:

Cliquez sur OK pour changer ma couleur

D'ACCORD

Dans l'extrait de code ci-dessus, il y a une rubrique que nous avons attribué un ID "test". En dessous, nous avons créé un bouton "D'ACCORD«À travers la balise de bouton et a déclaré le«sur clic”Fonction pour ce bouton. Cela précise que lorsque le «D'ACCORD"Le bouton sera cliqué, le"Func ()«La fonction JavaScript sera invoquée et la propriété CSS définie à l'intérieur de cette fonction sera implémentée au texte écrit en HTML.

Voici une fonction JavaScript pour rendre le code HTML ci-dessus exécutable:

fonction func ()
var y = document.getElementById ("texte");
y.style.color = "rouge";

L'extrait de code ci-dessus a une fonction nommée «Func ()"Dans lequel une variable"y"Est initialisé et le"getElementbyid«La méthode est déclarée faire référence au«texte”ID qui a le texte (contenu). Ensuite, il y a la propriété CSS insérée pour changer la couleur du texte en rouge.

Cela affichera un texte dans l'interface de sortie qui, en cliquant sur le bouton OK, modifiera la couleur du texte en rouge:

De cette façon, nous pouvons définir les propriétés CSS dans JavaScript.

Conclusion

Nous pouvons définir les propriétés CSS dans un élément de JavaScript en accédant d'abord à l'ID, à la classe ou à l'attribut de cet élément en utilisant la méthode GET pertinente. Par exemple, dans le post ci-dessus, nous avons appliqué le «getElementbyid" méthode. Après cela, définissez simplement la propriété CSS à appliquer à cet élément. Cet article explique bien comment définir les propriétés CSS en JavaScript.