ng-class 和 ng-style 有啥区别？

Posted 2023-02-19

【中文标题】ng-class 和 ng-style 有啥区别？

【英文标题】：What is the difference between ng-class and ng-style?ng-class 和 ng-style 有什么区别？

【发布时间】：2015-01-11 06:03:39

【问题描述】：

ng-class 和ng-style 似乎都是动态设置 CSS 类的方法。它们有什么区别？

【问题讨论】：

ng-class 设置类。 ng-style 设置样式。 This answer 可能会提供信息。

【参考方案1】：

ng-style 用于将 javascript 对象插入 style 属性，而不是 css 类。

以下指令将被翻译成style="color:red"

ng-style="color: 'red'"

ng-class 指令将您的对象转换为 class 属性。

当 isDeleted 变量为 true 时，以下将被转换为 class="deleted"。

ng-class="'deleted': isDeleted"

注意：

ng-style 还有一个用例。如果你想在 style 属性中插入一些东西，你应该考虑使用 ng-style。否则，正如documentation 所建议的那样，在 Internet Explorer 11 之前这将不起作用。

所以，不要使用样式：

style="width: progress"

使用 ng 样式：

ng-style="'width':progress"

【参考方案2】：

在ng-class 中，您正在加载在某个地方定义的 CSS 类，例如 Bootstrap。在ng-style 中，您正在设置您希望该元素具有的 CSS 样式，例如：

ng-style=" 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '" //background-color is a style

has-error 是在某处定义的由样式组成的类：

ng-class=" 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid

【参考方案3】：

来自官方文档：https://angular.io/api/common/NgClass

这些是使用 ngClass 的不同方式

...

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="'first': true, 'second': true, 'third': false">...</some- 

元素>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="'class1 class2 class3' : true">...</some-element>

2。与 ngStyle 类似，您可以执行以下操作：

**< some-element [ngStyle]="'font-style': styleExp">...</some-element>**

您的 styleExp 可以是任何评估为您正在设置的属性的合法值的东西，例如上例中的字体大小

或者，

****...****

其中 objExp 是一个包含样式属性的键值对的对象 例如宽度：40，边距：'2em'等

【参考方案4】：

理论上它们都是不同的，但实际上在某些时候它们会变得相同

ngStyle 用于在运行时动态添加样式和

ngClass 用于在运行时动态添加一些类，但类也包含一些 css 内容，因此间接您也在此处动态添加 css