切换 CSS 自定义属性

2024-01-20 01:09:40

利用 CSS 自定义属性切换单选按钮的背景颜色：无需 JavaScript

在用户界面设计中，单选按钮扮演着至关重要的角色，它们允许用户选择选项或调整设置。其中一个常见的用例是使用单选按钮来改变应用程序的视觉样式，例如背景颜色或文本颜色。

传统的 JavaScript 方法

过去，我们通常使用 JavaScript 来检测用户与单选按钮的交互并相应地附加一个类，以切换背景颜色。

const buttons = document.querySelectorAll('input[type="radio"]');

buttons.forEach((button) => {
  button.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode');
  });
});

这种方法需要编写额外的 JavaScript 代码，可能会增加代码库的大小和复杂性。

使用 CSS 自定义属性的现代方法

令人惊讶的是，我们现在可以使用 CSS 自定义属性来简化这个过程，无需任何 JavaScript。CSS 自定义属性允许我们在整个样式表中存储和操作可重复使用的值，从而简化我们的代码。

:root {
  --background-color: #ffffff;
}

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
}

label:hover {
  background-color: #efefef;
}

input[type="radio"]:checked ~ label {
  background-color: #000000;
}

在这个示例中，我们使用 :root 块来定义 --background-color 自定义属性，并将其设置为白色。然后，我们隐藏了单选按钮，使其在视觉上不可见，并将指针光标设置为可单击元素 label。

最重要的是，我们使用 :checked 伪类来选择已选中的单选按钮，并为其相邻的 label 元素应用 background-color。

利用 CSS 自定义属性实现更多自定义

使用 CSS 自定义属性的优势在于，它为我们提供了更多的灵活性进行自定义。例如，我们可以使用 calc() 函数来计算新的 background-color 值，从而进一步调整背景颜色。

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
}

label:hover {
  background-color: #efefef;
}

input[type="radio"]:checked ~ label {
  background-color: calc(var(--background-color) * 0.8);
}