Supprimer tous les styles d'un élément à l'aide de JavaScript

Dans le processus de mise à jour d'une page Web ou du site, il peut y avoir une exigence pour supprimer tout le style ou une partie de celui-ci à partir d'un élément particulier. En plus de cela, ajouter des effets et des messages d'avertissement / d'erreur sur le clic de la souris ou le survol. Dans de tels cas, la suppression de tous les styles d'un élément utilisant JavaScript se demande en attirant l'attention de l'utilisateur et en faisant ressortir le site Web.

Ce blog discutera des approches pour supprimer tous les styles d'un élément de JavaScript.

Comment supprimer / omettre tous les styles d'un élément de JavaScript?

Pour supprimer tous les styles d'un élément de JavaScript, les approches suivantes peuvent être utilisées:

• "removeAttribute ()" méthode.
• "style" propriété.
• "jquery«Méthodes.

Suivons chacune des approches une par une!

Approche 1: Supprimez tous les styles d'un élément de JavaScript à l'aide de la méthode RemoveAtTribut ()

Le "removeAttribute ()»Méthode omet un attribut d'un élément. Cette méthode peut être appliquée pour omettre tous les styles inclus d'un élément spécifique.

Syntaxe

élément.RemoveAttribute (nom)

Dans la syntaxe donnée:

• "nom»Fait référence au nom de l'attribut.

Exemple

Présentation de l'exemple suivant:

Ceci est le site Web de Linuxhint

Dans l'extrait de code ci-dessus:

• Incluez la rubrique indiquée ayant le spécifié "identifiant" et le "style" attribut.
• Dans la partie JavaScript du code, accédez à la rubrique incluse à partir de son «identifiant" en utilisant le "getElementByid ()" méthode.
• Dans l'étape suivante, appliquez le «removeAttribute ()"Méthode ayant l'attribut"style"Comme paramètre.
• Cela entraînera la suppression du style spécifié de l'en-tête.

Avant de retirer le style

Après avoir retiré le style

À partir des deux extraits d'image ci-dessus, la différence avant et après l'élimination du style peut être observée.

Approche 2: supprimer les styles spécifiques d'un élément de JavaScript à l'aide de la propriété de style

Le "style»La propriété donne la valeur de l'attribut de style d'un élément. Cette propriété peut être mise en œuvre pour supprimer une propriété particulière contenue dans l'attribut de style.

Syntaxe

élément.style.propriété = valeur

Dans la syntaxe ci-dessus:

• "valeur»Correspond à la valeur se référant à la propriété spécifiée.

Exemple

Passons par l'exemple suivant:

JavaScript est un langage de programmation très efficace. Il est très utile pour concevoir une page Web ou le site. Il peut également être intégré à HTML pour implémenter également certaines fonctionnalités supplémentaires.

Supprimer un style spécifique

Effectuez les étapes suivantes comme indiqué dans les lignes de code ci-dessus:

• Inclure un élément de paragraphe ayant le spécifié "identifiant" et le "style»Attribut composé des propriétés déclarées.
• Créez également un bouton avec un "sur clic”Événement invoquant la fonction RemoveStyle ().
• Dans l'étape suivante, accédez au paragraphe contenu en utilisant son «identifiant" dans le "getElementByid ()" méthode.
• Enfin, affectez la propriété "largeur" comme "nul".
• Cela supprimera la propriété de largeur dans le «style”Attribut du paragraphe sur le bouton cliquer.

Sortir

Dans la sortie ci-dessus, le «largeur«Du paragraphe est supprimé sur le bouton cliquer.

Approche 3: Supprimez tous les styles d'un élément de JavaScript à l'aide de jQuery

L'approche jQuery peut être appliquée pour récupérer directement l'élément inclus et supprimer son style sur le bouton cliquer.

Exemple

L'exemple donné ci-dessous explique le concept déclaré.

Avant de retirer le style

Dans les lignes de code ci-dessus:

• Inclure le cap indiqué. Ajoutez également l'image spécifiée ayant le «identifiant»Et ses dimensions définies dans le«style" attribut.
• Après cela, créez un bouton ayant le spécifié "identifiant".
• Dans la partie jQuery du code, accédez au bouton créé. Sur le bouton cliquer, la fonction indiquée sera déclenchée.
• Dans la définition de la fonction, accédez à l'image contenue par son «identifiant"Directement.
• Appliquez également le «removeattr ()"Méthode ayant l'attribut"style"Comme paramètre.
• Cela entraînera la négligence des dimensions définies de l'image, supprimant ainsi le style de l'élément sur le bouton cliquer.

Sortir

À partir de la sortie ci-dessus, il est évident que les dimensions définies de l'image dans le «style"L'attribut n'affecte pas le clic du bouton.

Conclusion

Le "removeAttribute ()"Méthode, le"style«Propriété, ou le«jquery»Une approche peut être utilisée pour supprimer tous les styles d'un élément à l'aide de JavaScript. La méthode reroveAtTribute () peut être appliquée pour supprimer tout le style de l'élément accessible directement. La propriété de style peut être mise en œuvre pour supprimer un style particulier dans le «style”Attribut à partir d'un élément. L'approche jQuery peut être appliquée pour atteindre les mêmes fonctionnalités. Ce tutoriel explique comment supprimer / omettre tous les styles d'un élément spécifique de JavaScript.