AngularJS ng-class 指令

实例

更改 <div> 元素的类别:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
.sky {
    color:white;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
.tomato {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
<body ng-app="">
<p>选择一个样式类:</p>
<select ng-model="home">
<option value="sky">Sky
<option value="tomato">Tomato
</select>
<div ng-class="home">
  <h2>欢迎回家!</h2>
  <p>我喜欢它!</p>
</div>
</body>
</html>

运行一下

定义与用法

ng-class 指令将一个或多个 CSS 类动态绑定到 HTML 元素。

ng-class 指令的值可以是字符串、对象或数组。

如果是字符串，则应包含一个或多个以空格分隔的样式类名。

作为一个对象，它应该包含键值对，其中键是要添加的样式的类名，值是布尔值。仅当该值设置为 true 时，才会添加该样式类。

作为一个数组，它可以是两者的组合。每个数组元素可以是字符串，也可以是如上所述的对象。

语法

<element ng-class="expression"></element>

由所有 HTML 元素支持。

参数值

值	描述
expression	返回一个或多个样式类名的表达式。

AngularJS ng-class 指令

实例

定义与用法

语法

参数值

分类导航