Parfois, nous devons supprimer les propriétés CSS des éléments HTML après avoir effectué certaines tâches. Par exemple, l'utilisateur n'a pas payé les frais d'abonnement à votre application. Par conséquent, vous aurez le message « Paiement dû » en « rouge » dans la section d’en-tête. Une fois que l'utilisateur a effacé le paiement, vous pouvez modifier le contenu de l'en-tête et supprimer l'attribut « couleur : rouge » pour définir la couleur initiale.
Il existe de nombreux cas d'utilisation qui nécessitent la suppression des propriétés CSS des éléments HTML. Ici, nous allons apprendre différentes manières de supprimer les propriétés CSS.
La première méthode utilise la méthode removeProperty(). Il est utilisé pour supprimer tout attribut CSS d'un élément HTML et prend le nom de l'attribut comme paramètre.
Les utilisateurs peuvent utiliser la méthode removeProperty() pour supprimer les propriétés CSS des éléments HTML selon la syntaxe suivante.
ele.style.removeProperty("property-name");
Dans la syntaxe ci-dessus, "ele" est un élément HTML dont nous devons supprimer les attributs CSS.
Dans l'exemple ci-dessous, nous avons créé un élément div avec différentes propriétés CSS telles que "largeur", "hauteur", "bordure" et "couleur d'arrière-plan".
Chaque fois que l'utilisateur clique sur le bouton, nous exécuterons la fonction removeColor(). Dans la fonction removeColor(), nous accédons à l'élément div en utilisant le nom de la classe. Après cela, nous utilisons la méthode removeProeprty() pour supprimer la couleur d'arrière-plan de l'élément div en passant "background-color" comme paramètre.
Dans la sortie, l'utilisateur peut cliquer sur le bouton et constater que la couleur d'arrière-plan sera supprimée.
<html>
<body>
<h3> Using the <i> removeProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px; background-color: red; border: 2px solid black;">
</div> <br>
<button onclick = "removeColor()">
Remove background color </button>
<script>
function removeColor() {
var ele = document.querySelector(".ele");
ele.style.removeProperty("background-color");
}
</script>
</html>
La deuxième façon de supprimer les propriétés CSS des éléments HTML consiste à utiliser la méthode setProperty(). La méthode setProperty() est utilisée pour définir les propriétés CSS d'un élément HTML, mais lorsque nous définissons une chaîne vide pour une propriété CSS, nous pouvons supprimer la propriété CSS de l'élément.
Les utilisateurs peuvent utiliser la méthode setProperty() pour supprimer les propriétés CSS des éléments HTML en suivant la syntaxe suivante.
ele.style.setProperty(css property, "");
Dans la syntaxe ci-dessus, nous transmettons le nom de la propriété comme premier paramètre et la chaîne vide comme deuxième paramètre.
Dans l'exemple ci-dessous, nous avons créé l'élément div avec quelques propriétés CSS comme dans le premier exemple. Dans la fonction removeBorder(), nous accédons à l'élément div en utilisant le nom de la classe et la méthode setProperty() pour définir la chaîne vide de la bordure.
Dans la sortie, nous pouvons d'abord observer la bordure verte et lorsque nous cliquons sur le bouton, la bordure est supprimée.
<html>
<body>
<h3> Using the <i> setProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px;background-color: blue; border: 10px solid green;">
</div> <br>
<button onclick = "removeBorder()">
Remove border </button>
<script>
function removeBorder() {
var ele = document.querySelector(".ele");
ele.style.setProperty("border", "");
}
</script>
</html>
Une autre façon de supprimer les propriétés CSS des éléments HTML consiste à définir une valeur nulle pour une propriété CSS spécifique. Nous pouvons également définir une valeur nulle pour toute propriété CSS spécifique à l’aide de la méthode setProperty() de JavaScript et de la méthode CSS() de JQuery. Ici, nous allons accéder directement à la propriété CSS et lui définir une valeur nulle.
Les utilisateurs peuvent supprimer les propriétés CSS des éléments HTML en définissant une valeur nulle pour les propriétés CSS en suivant la syntaxe ci-dessous.
element.style.css_property = null;
Dans la syntaxe ci-dessus, les utilisateurs doivent remplacer "element" et "css_property" respectivement par des noms d'éléments HTML et de propriétés CSS spécifiques.
Dans l'exemple ci-dessous, l'élément div contient du texte et nous définissons la taille de la police sur 3rem. Dans la fonction RemoveSize(), nous accédons à l'objet "style" de l'élément div et définissons la propriété "fontSize" de l'objet style sur null.
Dans la sortie, l'utilisateur peut cliquer sur un bouton pour définir la taille de police initiale du texte de l'élément div.
<html>
<body>
<h3> Setting the <i> null values to CSS proeprties </i> to remove the CSS property from HTML element </h3>
<div style = "font-size: 3rem;">
Hello World! How are you?
</div>
</div> <br>
<button onclick = "removeSize()"> Remove font-size </button>
<script>
function removeSize() {
let div = document.querySelector('div');
div.style.fontSize = null;
}
</script>
</html>
La quatrième façon de supprimer les attributs CSS des éléments HTML consiste à utiliser la méthode removeAttribute(). La méthode RemoveAttribute() de JavaScript est utilisée pour supprimer un attribut HTML spécifique de JavaScript. Dans notre cas, nous pouvons supprimer l'attribut "style", ce qui supprimera tous les styles de l'élément HTML.
Les utilisateurs peuvent utiliser la méthode removeAttribute() pour supprimer les attributs CSS des éléments HTML en suivant la syntaxe suivante.
ele.removeAttribute("style");
Dans la syntaxe ci-dessus, nous passons "style" comme paramètre de la méthode remvoeAttribute() pour supprimer tous les attributs CSS.
Dans l'exemple ci-dessous, nous avons créé un élément «
» qui contient du texte et plusieurs propriétés CSS.
La fonctionremoveStyle() supprime l'attribut "style" de l'élément "
" à l'aide de la méthode removeAttribute().
Using the removeAttribute() method to remove the CSS property from HTML element
Welcome to the tutorials point, CSS tutorial.
<script>
function removeStyle() {
var ele = document.getElementsByClassName("para")[0];
ele.removeAttribute("style");
}
</script>
Nous avons appris quatre façons différentes de supprimer les propriétés CSS des éléments HTML. Dans la première méthode, nous avons utilisé la méthode removeProperty(), qui est l’un des meilleurs moyens de supprimer les propriétés CSS. Les deuxième et troisième méthodes sont presque similaires dans la définition d'une valeur nulle pour les propriétés CSS, mais elles ne suppriment pas les propriétés CSS des éléments HTML.
Dans la dernière méthode, nous avons utilisé la méthode removeAttribute() pour supprimer l'attribut "style", mais elle ne doit être utilisée que lorsque nous devons supprimer tous les styles de l'élément HTML.
Toutes les méthodes ci-dessus ne fonctionnent que pour supprimer les propriétés CSS en ligne.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Introduction à la signification d'un mot de passe invalide
Que faire avec la carte vidéo
Vérifiez le statut en ligne de vos amis sur TikTok
Algorithme a priori des règles d'association
Comment configurer les variables d'environnement Tomcat
Quels sont les logiciels bureautiques
Quelles sont les commandes d'arrêt et de redémarrage de Linux ?
Le navigateur Edge ne peut pas rechercher
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
