使用单选按钮切换 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)
复制代码

你能够在这👉查看效果。