在 AngularJS 中，我们可以使用 ng-class 和 ng-style 指令来动态地设置元素的 CSS 类和样式。这两个指令虽然都可以用于控制元素的样式，但是它们的使用方式和效果是不同的。
ng-class 的用法和效果
ng-class 指令可以根据表达式的值来动态地添加或移除元素的 CSS 类。它的用法如下：
---- ----------- --------- ------------ --------- ----------- ---------
在上面的代码中，ng-class 指令的属性值是一个对象，这个对象中的键是 CSS 类名，值是一个表达式。当表达式的值为真时，对应的 CSS 类就会被添加到元素中，否则就会被移除。可以添加多个 CSS 类，每个 CSS 类都可以设置一个表达式来控制它的添加和移除。
下面是一个例子，它演示了如何使用 ng-class 指令来控制元素的 CSS 类：
---- ----------- ------- ------- --------- -------- --------- ----------------
在上面的例子中，我们定义了两个 CSS 类 bold 和 italic，它们分别对应两个表达式 isBold 和 isItalic。当 isBold 为真时，bold 类会被添加到元素中；当 isItalic 为真时，italic 类会被添加到元素中。通过改变 isBold 和 isItalic 的值，我们可以动态地改变元素的样式。
ng-style 的用法和效果
ng-style 指令可以根据表达式的值来动态地设置元素的样式。它的用法如下：
---- ----------- ------------ ------------ ------------ ----------- ---------
在上面的代码中，ng-style 指令的属性值也是一个对象，这个对象中的键是 CSS 样式属性名，值是一个表达式。当表达式的值发生变化时，对应的 CSS 样式属性就会被更新。
下面是一个例子，它演示了如何使用 ng-style 指令来设置元素的样式：
---- ----------- -------- ---------- ------------ -------- - ---- --------- ----------------
在上面的例子中，我们使用了两个 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