CSS Variable - Cettoana

[ March 23, 2018 ]

根據 Can I Use 的結果，CSS Variable 在各瀏覽器支援度都已經提升了不少。這東西實用又簡單，大潤發有賣的話一定賣到缺貨。

基本用法：

/* 命名 --color 變數，變數開頭必須是槓槓(--) */
:root {
  --color: #333;
}
/* 也可在不同 selector 內命名變數 */
button {
  --color: #555;
}

.wrap {
  /* ... */
  /* var() 來呼叫變數 */
  color: var(--color);
  /* root 沒有宣告的變數，var 的第二個參數也可以帶上 default 值 */
  background-color: var(--bg-color, #EFEFEF);
}

除此之外也可以透過 JavaScript 來給予不同的值，下面 DEMO 有用到。

DEMO

在 Codepen 上看

HTML

<div id="wrap" class="wrap">
  Click button
</div>
<button onclick="onClick(this)">苺</button>
<button onclick="onClick(this)">銀</button>

CSS

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 300px;
  font-size: 25px;
  color: var(--color, #333333);
  background-color: var(--bg-color, #EFEFEF);
}

JavaScript

var root = document.documentElement
var wrap = document.getElementById('wrap')

onClick = (btn) => {
  var type = btn.innerHTML

  switch(type) {
    case '苺':
      root.style.setProperty('--bg-color', '#4286f4')
      root.style.setProperty('--color', 'white')
      wrap.innerHTML = '苺機會'
      break
    case '銀':
      root.style.setProperty('--bg-color', '#ddeaff')
      root.style.setProperty('--color', 'black')
      wrap.innerHTML = '銀不了'
      break
    default:
      break
  }
}

苺銀過。･ﾟ･(つд`ﾟ)･ﾟ･

JavaScript CSS TIL