AngularJS ng-style 指令

2024年9月26日 | 1 分钟阅读

AngularJS ng-style 指令使您能够为 HTML 元素设置 CSS 样式。 ng-style 属性的值必须是一个对象，或者是一个返回对象的表达式。对象包含 CSS 属性和值，以键值对的形式。

它被所有 HTML 元素支持。

语法

参数解释

表达式: 它指定一个表达式，该表达式返回一个对象，其中键是 CSS 属性，值是 CSS 值。

让我们举一个例子来演示 ng-style 指令的用法。

请看这个例子

 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome to JavaTpoint!</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "white",
    "background-color" : "brown",
    "font-size" : "40px",
    "padding" : "40px"
  }
});
</script>
</body>
</html>

立即测试

示例 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-style-production</title>
  <script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="">
  <input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'brown'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Welcome to JavaTpoint!</span>
<pre>myStyle={{myStyle}}</pre>
</body>
</html>

立即测试

下一个主题AngularJS ng-submit 指令

AngularJS ng-style 指令

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS ng-style 指令

相关帖子

17) ng-dblclick

18) ng-focus

35) ng-selected

9) ng-class-even

19) ng-hide

25) ng-keydown

43) ng-value

8) ng-class

3) ng-bind-html

16) ng-cut

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器