使用單選按鈕切換 CSS 自定義屬性

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰css

咱們有一組單選按鈕，分別切換不一樣的背景顏色，其主要結構以下：html

<form class="controls">
  <input type="radio" name="color" value="night-fade" checked />
  <input type="radio" name="color" value="warm-flame" />
  <input type="radio" name="color" value="spring-warmth" />
</form>
複製代碼

以往，咱們能夠使用 JavaScript 來檢測用戶什麼時候與單選按鈕交互並相應地附加一個類。spring

const bgColor = document.querySelector('body')
const controls = document.querySelector('.controls')

let currentClass = 'night-fade'

const onChange = e => {
  if (!e.target.value || !e.target.checked) return

  if (bgColor.classList.contains(currentClass)) {
    bgColor.classList.replace(currentClass, e.target.value)
  } else {
    bgColor.classList.add(e.target.value)
  }

  currentClass = e.target.value
}

controls.addEventListener('change', onChange)
複製代碼

而後，咱們爲每一個類添加 CSS background-image 來切換背景：markdown

body {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

body.warm-flame {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

body.spring-warmth {
  background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}
複製代碼

效果以下：oop

然而，如今咱們能夠有更好的選擇：CSS 自定義屬性（也稱變量）。它能夠使你的 CSS、JS 看起來更加簡潔、方便，咱們一樣使用它來完成上面的效果。post

自定義屬性

咱們能夠全局範圍內，也就是 :root 內爲接下來須要用到背景色值，都分配一個自定義屬性：ui

:root {
  --bg-color-night-fade: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  --bg-color-warm-flame: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  --bg-color-spring-warmth: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}
複製代碼

接下來，咱們在本地範圍內，也就是須要應用背景色的元素內（這裏是 body）定義了一個新的 --bg-color 變量指定一個初始背景色。它將用於後面在單選按鈕改變時，經過 JS 動態改變 --bg-color 內的值，使得 background-image 和 --bg-color 同步更新。spa

咱們使用第一個 --bg-color-night-fade 變量做爲第一個單選按鈕選項相對應的初始值：code

body {	
  --bg-color: var(--bg-color-night-fade);
  background-image: var(--bg-color);
}
複製代碼

最後，監聽表單下單選按鈕的 change，在 onChange 事件處理程序中，咱們使用與所選 radio 相對應的自定義屬性更新 --bg-color 的值。orm

const bgColor = document.querySelector('body')
const controls = document.querySelector('.controls')

const onChange = (e) => {
  if (!e.target.value || !e.target.checked) return
  
  bgColor.style.setProperty('--bg-color', `var(--bg-color-${e.target.value})`)
}

controls.addEventListener('change', onChange)
複製代碼

你能夠在這👉查看效果。