在 AngularJS 中，我们可以使用 ng-class 和 ng-style 指令来动态地设置元素的 CSS 类和样式。这两个指令虽然都可以用于控制元素的样式，但是它们的使用方式和效果是不同的。
ng-class 的用法和效果
ng-class 指令可以根据表达式的值来动态地添加或移除元素的 CSS 类。它的用法如下：
<div ng-class="{ 'class1': expression1, 'class2': expression2 }"></div>在上面的代码中，ng-class 指令的属性值是一个对象，这个对象中的键是 CSS 类名，值是一个表达式。当表达式的值为真时，对应的 CSS 类就会被添加到元素中，否则就会被移除。可以添加多个 CSS 类，每个 CSS 类都可以设置一个表达式来控制它的添加和移除。
下面是一个例子，它演示了如何使用 ng-class 指令来控制元素的 CSS 类：
<div ng-class="{ 'bold': isBold, 'italic': isItalic }">Hello, AngularJS!</div>在上面的例子中，我们定义了两个 CSS 类 bold 和 italic，它们分别对应两个表达式 isBold 和 isItalic。当 isBold 为真时，bold 类会被添加到元素中；当 isItalic 为真时，italic 类会被添加到元素中。通过改变 isBold 和 isItalic 的值，我们可以动态地改变元素的样式。
ng-style 的用法和效果
ng-style 指令可以根据表达式的值来动态地设置元素的样式。它的用法如下：
<div ng-style="{ 'property1': expression1, 'property2': expression2 }"></div>在上面的代码中，ng-style 指令的属性值也是一个对象，这个对象中的键是 CSS 样式属性名，值是一个表达式。当表达式的值发生变化时，对应的 CSS 样式属性就会被更新。
下面是一个例子，它演示了如何使用 ng-style 指令来设置元素的样式：
<div ng-style="{ 'color': fontColor, 'font-size': fontSize + 'px' }">Hello, AngularJS!</div>在上面的例子中，我们使用了两个 CSS 样式属性 color 和 font-size，它们分别对应两个表达式 fontColor 和 fontSize + 'px'。fontSize 变量的值会被转换为像素单位并拼接到字符串中。通过改变 fontColor 和 fontSize 的值，我们可以动态地改变元素的样式。
ng-class 和 ng-style 的区别
ng-class 和 ng-style 都可以用来控制元素的样式，但是它们的使用方式和效果是不同的。下面是它们的主要区别：
ng-class用于添加或移除 CSS 类，而ng-style用于设置 CSS 样式属性。ng-class的属性值是一个对象，它的键是 CSS 类名，值是一个表达式；ng-style的属性值也是一个对象，它的键是 CSS 样式属性名，值是一个表达式。ng-class可以添加多个 CSS 类，每个 CSS 类都可以设置一个表达式来控制它的添加和移除；ng-style只能设置一个 CSS 样式属性，它的值可以是一个表达式。
总结
在 AngularJS 中，ng-class 和 ng-style 指令都可以用来控制元素的样式，它们的使用方式和效果是不同的。ng-class 用于添加或移除 CSS 类，而 ng-style 用于设置 CSS 样式属性。通过合理地使用这两个指令，我们可以动态地控制元素的样式，从而提高用户体验。
示例代码：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----------------- -------- --- ---------------- -------- -------------------------------------------------------------------------------------- -------- ------- - --------------- ----- --- --------- - -------------- ------- --- --------- ------- ----- ----------------------- ---- ----------- ------- ------- --------- -------- --------- --------------- --- ----------- -------- ---------- ------------ -------- - ---- ------- -- - -------------- --------- ----- --- - ----------------------- ---- -------------------------- ---------------- - ---------------- - ----- ------------------ - ------ ------------------- - ------ ------------------ - --- ----- ---------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f539f42b3ccec22fd5e1f0