El atributo de estilo se establece mediante ng-style . El valor de ng-style es un objeto, que se usa para referirse al estilo CSS, que se aplica al elemento.
Sintaxis:
<element ng-style="object">..</element>
Propiedades:
Objeto : El objeto se utiliza para devolver el estilo css aplicado al elemento.
Valor devuelto: Devuelve el estilo aplicado a los elementos de la clase ng.
Ejemplo 1:
<!DOCTYPE html> <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body ng-app="gfg" ng-controller="geekctrl"> <h1 ng-style="geekstyle"> GeeksforGeeks </h1> <script> var app = angular.module("gfg", []); app.controller( "geekctrl", function($scope) { $scope.geekstyle = { "color": "white", "background-color": "green", "font-size": "80px", } }); </script> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body ng-app="gfg" ng-controller="geekctrl"> <h1 ng-style="geekstyle"> GeeksforGeeks </h1> <h2 ng-style="geekstyle1"> GeeksforGeeks </h2> <script> var app = angular.module("gfg", []); app.controller("geekctrl", function($scope) { $scope.geekstyle = { "color": "white", "background-color": "green", "font-size": "60px", } $scope.geekstyle1 = { "color": "white", "background-color": "green", "font-size": "80px", } }); </script> </body> </html>
Producción:
Soporte del navegador: los navegadores enumerados admiten ng-class con ng-style –
- explorador de Internet
- Firefox
- Google Chrome
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA