Comment obtenir et modifier les attributs, classes et styles de l'élément via JavaScript

Souvent, les pages Web doivent changer leurs éléments ou à quoi ressemblent leurs éléments en fonction des actions ou des choix de l'utilisateur. Changer les éléments, les attributs, les classes et les styles d'une page Web se fait avec l'aide du Dom (Document Object Model). Le DOM a été défini comme une norme sur la façon dont chaque navigateur interprétera la page Web HTML et comment il accédera aux différents éléments de la page Web par W3C (World Wide Web Consortium).

JavaScript interagit également avec les éléments d'une page HTML en utilisant le DOM, et dans cet article, nous allons apprendre à accéder aux éléments HTML avec JavaScrip.

Alors, créons d'abord une page HTML avec divers éléments dessus en utilisant les lignes de code suivantes:

Changez mon style

Modifier mon attribut

Changer ma classe

Ces lignes de code nous donneront la page Web suivante:

Comment obtenir des éléments en javascript

Avant de voir comment changer d'éléments en utilisant JavaScript, nous devons d'abord savoir comment obtenir des éléments en JavaScript. Eh bien, pour obtenir la référence de l'élément, nous pouvons utiliser l'une des différentes fonctions fournies par JavaScript telles que:

• getElementByid ()
• getElementByClassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTagNamens ()

Ils sont tous assez faciles à utiliser et à comprendre par leur nom. Supposons que nous ayons un élément à l'intérieur de notre HTML avec un ID de «xyz», Pour accéder aux données de cet élément, nous utiliserions la ligne suivante dans le fichier JavaScript ou la balise de script:

var obj = document.getElementById ("xyz");

De même, si nous essayons d'accéder à un élément en utilisant son nom de classe, nous utiliserions la fonction GetElementByClassName ().

Changer le style d'un élément

En regardant notre fichier HTML, nous savons que la div qui dit «changer mon style» a l'identifiant de «Changer le style», Nous allons donc accéder à cela avec la ligne suivante:

var cs = document.GetElementById ("Mangiestyle");

Maintenant, que nous avons notre référence d'élément dans la variable «CS», nous pouvons accéder à sa fonction de style en utilisant le dot-opérateur Et à partir de là, nous pouvons changer ses différentes valeurs de style. Par exemple, si nous devions changer la couleur d'arrière-plan en jaune, nous utiliserions la ligne:

CS.style.BackgroundColor = "Yellow";

Après avoir exécuté le fichier HTML, vous verrez la sortie suivante:

Vous pouvez également voir dans l'image ci-dessus, que nous avons pu changer le style de l'élément.

Modifier la classe d'un élément à l'aide de JavaScript

Nous avons l'élément avec l'ID «ChangeClass» qui a une classe de «myClass», pour modifier la classe de cet élément La première chose que nous devons faire est de référer à cet élément en JavaScript en utilisant la ligne de code suivante:

var cc = document.GetElementById ("ChangeClass");

Maintenant que nous avons la référence d'élément dans la variable "CC«Nous pouvons accéder à son attribut de classes en utilisant le classList () fonction. Pour ajouter une nouvelle classe «newclass» dans la même variable, nous pouvons utiliser la ligne de code suivante:

CC.liste de classe.ajouter ("newClass");

Si vous ouvrez la console du développeur et vérifiez l'attribut de classe, vous trouverez le résultat suivant:

Comme vous pouvez le voir, vous avez pu ajouter une autre classe à l'attribut de classe de l'élément en utilisant JavaScript. Si vous souhaitez supprimer une classe déjà existante de la liste, vous pouvez utiliser la ligne de code suivante:

CC.liste de classe.retirer ("myClass");

Après avoir exécuté la ligne ci-dessus, vous verrez les résultats suivants dans la console du développeur:

Et voilà; Vous avez pu supprimer une classe de la liste des classes d'un élément à l'aide de JavaScript.

Changer l'attribut de l'élément

JavaScript a une fonction appelée «setAttribute«Ce qui permet à l'utilisateur de modifier la valeur de tout attribut de l'élément s'il peut s'agir d'un attribut« classe »ou d'un attribut« ID ». Par exemple, pour modifier la classe d'un élément, indiquons d'abord l'élément qui dit «Modifiez mon attribut, nous utilisons la ligne de code suivante:

var ca = document.getElementById ("Changeattr");

Et puis nous pouvons utiliser la fonction «setAttribute» comme:

Californie.setAttribute ("classe", "bonjour");

Maintenant, nous pouvons observer ce changement dans les outils de développeur comme

Nous pouvons même attribuer nos propres attributs à l'élément en utilisant la fonction, par exemple, si nous voulons un attribut de «NewAttr"À cet élément avec une valeur de"fait», Nous pouvons ajouter cela en utilisant la ligne de code suivante:

Californie.setAttribute ("NewAttr", "Done");

Et si nous observons l'élément de la console du développeur, nous pouvons voir le résultat suivant:

Comme il est clair dans l'image ci-dessus, nous avons pu ajouter un nouvel attribut nommé «NewAttr"À notre élément en utilisant JavaScript.

Conclusion

JavaScript fournit diverses fonctionnalités et fonctions qui nous aident à modifier diverses propriétés et attributs d'un élément HTML. Toutes ces modifications à un élément HTML sont effectuées à l'aide du modèle d'objet de document (DOM) alors que JavaScript interagit avec le DOM pour modifier les propriétés d'un élément. Aujourd'hui, dans cet article, nous avons appris comment nous pouvons utiliser JavaScript et obtenir une référence à un élément, puis avec l'aide de cette référence comment nous pouvons modifier le style de cet élément, la classe de l'élément et comment nous pouvons modifier le Attributs de l'élément. Parallèlement à ces modifications, nous avons même appris comment pouvons-nous ajouter un nouvel attribut de notre choix à un élément HTML.