Comment supprimer les propriétés CSS à l'aide de JavaScript ?-js tutoriel-php.cn

Comment supprimer les propriétés CSS à l'aide de JavaScript ?

王林

Libérer： 2023-09-10 18:09:03

avant

1392 Les gens l'ont consulté

如何使用 JavaScript 删除 CSS 属性？

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.

Utilisez la méthode RemoveProperty()

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.

Grammaire

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");

Copier après la connexion

Dans la syntaxe ci-dessus, "ele" est un élément HTML dont nous devons supprimer les attributs CSS.

Exemple

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>

Copier après la connexion

Utilisez la méthode setProperty()

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.

Grammaire

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, "");

Copier après la connexion

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.

Exemple

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>

Copier après la connexion

Supprimez les propriétés CSS en définissant la valeur "nulle"

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.

Grammaire

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;

Copier après la connexion

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.

Exemple

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>

Copier après la connexion

Utilisez la méthode RemoveAttribute()

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.

Grammaire

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");

Copier après la connexion

Dans la syntaxe ci-dessus, nous passons "style" comme paramètre de la méthode remvoeAttribute() pour supprimer tous les attributs CSS.

Exemple

Dans l'exemple ci-dessous, nous avons créé un élément «

» qui contient du texte et plusieurs propriétés CSS.

La fonction

removeStyle() 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(&quot;style&quot;);
        }
    </script>

Copier après la connexion

Conclusion

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!