動態賦值

有時候我們需要透過程式去動態賦予元素樣式，下方程式碼以 Vue.js 為例，input 使用 v-model 綁定資料 size，當 range 拖動改變 size 的數值時，就可以動態調整文字大小 f:${size}。

<div id="app">
  <h1 :class="`f:${size}`">Hello World!</h1>
  <input v-model="size" type="range" min="16" max="98" step="2" />
</div>

const { createApp } = Vue;

createApp({
  data() {
    return {
      size: 16
    }
  }
}).mount('#app');

條件式類名

再舉個例子，input 使用 v-model 綁定資料 flipped，當 checkbox 切換 flipped 的狀態時，元素就會有條件地應用 scaleX(-1) 這個類名。

<div id="app">
  <h1 :class="{'scaleX(-1)': flipped}">Hello World!</h1>
  <input v-model="flipped" type="checkbox" />
</div>

const { createApp } = Vue;

createApp({
  data() {
    return {
      flipped: false
    }
  }
}).mount('#app');

總結

本日 codepen 連結

Master CSS 的 JIT 模式在瀏覽器端觀察 DOM 類名的變化，即時產生相應的 CSS 規則並注入到運行中的樣式表。

因此我們可以透過程式去動態賦予元素樣式。

參考

• Master CSS 官網 - 動態賦值