Maison > Article > interface Web > Comment changer dynamiquement les classes CSS en angulaire (trois façons)

Comment changer dynamiquement les classes CSS en angulaire (trois façons)

PHPzoriginal: 2023-04-26 16:13:301006parcourir

AngularJS est un framework frontal très populaire qui fournit de nombreuses instructions et fonctions utiles pour nous aider à écrire de meilleures applications JavaScript et est facile à utiliser.

Dans AngularJS, nous pouvons utiliser la directive ng-class pour modifier dynamiquement les classes CSS et ainsi modifier le style des éléments HTML. La directive ng-class peut être utilisée de trois manières différentes, nous pouvons utiliser la syntaxe suivante :

Utilisez une expression :

<div ng-class="{&#39;class1&#39;: expression1, &#39;class2&#39;: expression2}">Some Content</div>

Dans cet exemple, nous définissons un objet où les clés sont des noms de classe CSS et les valeurs sont une expression booléenne. Si l'expression est vraie, la classe CSS correspondante est appliquée à l'élément.

Utilisation de plusieurs classes CSS :

<div ng-class="[&#39;class1&#39;, &#39;class2&#39;]">Some Content</div>

Dans cet exemple, nous passons directement un tableau où chaque élément est un nom de classe CSS. Ces noms de classe seront appliqués aux éléments.

Utilisez une fonction :

<div ng-class="getClass()">Some Content</div>

Dans cet exemple, nous utilisons une fonction pour renvoyer dynamiquement un nom de classe CSS. Lorsque nous appelons la directive ng-class, elle appelle automatiquement la fonction getClass() et applique la valeur de retour comme nom de classe CSS à l'élément.

Exemple de code :

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS ng-class</title>
    <style>
        .big {
            font-size: 40px;
        }
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body ng-controller="myCtrl">
    <div ng-class="{&#39;big&#39;: isBigFont, &#39;red&#39;: isRedText, &#39;green&#39;: isGreenText}">
        <p>Some content here</p>
    </div>

    <button ng-click="toggleFont()">Toggle Font Size</button>
    <button ng-click="toggleColor()">Toggle Color</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.isBigFont = false;
            $scope.isRedText = false;
            $scope.isGreenText = false;

            $scope.toggleFont = function() {
                $scope.isBigFont = !$scope.isBigFont;
            };

            $scope.toggleColor = function() {
                $scope.isRedText = !$scope.isRedText;
                $scope.isGreenText = !$scope.isGreenText;
            };
        });
    </script>
</body>
</html>

Dans cet exemple, nous définissons d'abord trois classes CSS, à savoir big, red et green. Utilisez ensuite la directive ng-class pour modifier dynamiquement la classe CSS et le style de l'élément.

Dans le contrôleur, nous définissons trois variables : isBigFont, isRedText et isGreenText. En cliquant sur le bouton, nous pouvons modifier dynamiquement les valeurs de ces variables et ainsi changer le style de l'élément.

Pour résumer, l'utilisation de la directive ng-class d'AngularJS nous permet de modifier facilement et dynamiquement les classes CSS afin d'injecter des styles dans les éléments HTML. Sa prise en charge dans AngularJS est très élevée, nous pouvons donc l'utiliser dans notre application en toute confiance.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：D'où vient la vue de vue.set ?Article suivant：D'où vient la vue de vue.set ?

Articles Liés

Voir plus