Angular样式设置ngStyle

最新推荐文章于 2024-11-27 12:08:42 发布

tamia_nice

最新推荐文章于 2024-11-27 12:08:42 发布

阅读量1.3k

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/weixin_47144417/article/details/114439755

版权

angular 专栏收录该内容

8 篇文章

订阅专栏

这篇博客探讨了在 Angular 应用中如何使用 `style` 和 `ngStyle` 指令来动态设置元素的样式。示例展示了如何根据条件改变文字颜色，以及如何设置带单位的字体大小。此外，还通过 `ngStyle` 属性绑定一个对象来同时设置多个样式属性。文章以一个实际的 Angular 组件代码示例结束，展示了如何在组件类中定义样式对象并将其应用于模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- [style.属性值]    和[ngStyle] -->
<p [style.color]="'pink'">我是粉色</p>
<p [style.color]="true ? 'green' : 'red'">我是绿色</p>


<!-- 带单位 -->
<p [style.font-size.px]="30">我是粉色</p>
<p [style.font-size.em]="2">我是绿色</p>


<!-- [ngStyle]对象设置 -->

<!-- <p [ngStyle]="{'color': 'bule','font-size':'50px'}">我是粉色</p> -->
<p [ngStyle]="styleObj">我是粉色</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  styleObj = { ' color ': 'bule', 'font-size': ' 50px' };
}