Bagaimana untuk menukar kelas CSS secara dinamik dalam sudut (tiga cara)-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menukar kelas CSS secara dinamik dalam sudut (tiga cara)

PHPz

Lepaskan： 2023-04-26 16:25:46

asal

1083 orang telah melayarinya

AngularJS ialah rangka kerja bahagian hadapan yang sangat popular yang menyediakan banyak arahan dan fungsi yang berguna untuk membantu kami menulis aplikasi JavaScript yang lebih baik dan mudah digunakan.

Dalam AngularJS, kita boleh menggunakan arahan ng-class untuk menukar kelas CSS secara dinamik dan dengan itu menukar gaya elemen HTML. Arahan kelas-ng boleh digunakan dalam tiga cara berbeza, kita boleh menggunakan sintaks berikut:

Gunakan ungkapan:

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

Salin selepas log masuk

Dalam contoh ini, Kami tentukan objek dengan kuncinya ialah nama kelas CSS dan nilainya ialah ungkapan boolean. Jika ungkapan itu benar, kelas CSS yang sepadan digunakan pada elemen.

Menggunakan berbilang kelas CSS:

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

Salin selepas log masuk

Dalam contoh ini, kami terus menghantar tatasusunan di mana setiap elemen ialah nama kelas CSS. Nama kelas ini akan digunakan pada elemen.

Gunakan fungsi:

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

Salin selepas log masuk

Dalam contoh ini, kami menggunakan fungsi untuk mengembalikan nama kelas CSS secara dinamik. Apabila kita memanggil arahan kelas-ng, ia secara automatik memanggil fungsi getClass() dan menggunakan nilai pulangan sebagai nama kelas CSS kepada elemen.

Kod sampel:

<!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>

Salin selepas log masuk

Dalam contoh ini, kami mula-mula mentakrifkan tiga kelas CSS, iaitu besar, merah dan hijau. Kemudian gunakan arahan kelas-ng untuk menukar kelas CSS dan gaya elemen secara dinamik.

Dalam pengawal, kami mentakrifkan tiga pembolehubah: isBigFont, isRedText dan isGreenText. Dengan mengklik butang, kita boleh menukar nilai pembolehubah ini secara dinamik dan dengan itu menukar gaya elemen.

Untuk meringkaskan, menggunakan arahan ng-class AngularJS membolehkan kami menukar kelas CSS secara dinamik dengan mudah untuk menyuntik gaya ke dalam elemen HTML. Sokongannya dalam AngularJS sangat tinggi, jadi kami boleh menggunakannya dalam aplikasi kami dengan yakin.

Atas ialah kandungan terperinci Bagaimana untuk menukar kelas CSS secara dinamik dalam sudut (tiga cara). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!