style binding

除了 class binding，Angular 也提供了 style binding 的方式來直接設定元素的樣式。

兩種主要寫法

1. 物件形式綁定

使用 [style] 綁定一個樣式物件：

<div [style]="{
  'font-size': '64px',
  'background-color': 'blue',
  'margin-top': '20px'
}">

也可以使用駝峰式命名：

<div [style]="{
  fontSize: '64px',
  backgroundColor: 'blue',
  marginTop: '20px'
}">

注意：

  • CSS 屬性中的連字符（-）在 JavaScript / TypeScript 中是不合法的

  • 所以要用引號包住屬性名，或使用駝峰式命名

  • 值必須是字串形式

2. 單一樣式綁定

使用 [style.特定樣式] 的形式：

<div 
  [style.fontSize]="'50px'"
  [style.color]="isActive ? 'red' : 'blue'"
  [style.width.px]="100"
>

也可以使用連字符形式：

<div 
  [style.font-size]="'50px'"
  [style.background-color]="isDark ? 'black' : 'white'"
>

補充說明：

  1. 單位可以直接加在屬性後面：

[style.width.px]="100"    // 不需要加單位
[style.height.%]="50"     // 使用百分比

  1. 可以使用條件運算：

[style.color]="isError ? 'red' : 'black'"
[style.display]="isVisible ? 'block' : 'none'"

  1. 可以綁定元件的屬性或方法：

[style.backgroundColor]="getColor()"
[style.font-size]="fontSize + 'px'"
PreviousClass BindingNextLifecycle

Last updated