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