面向初学者的 CSS 变量（CSS 自定义属性）

在我们的项目中，我们经常会遇到重复的值，例如宽度、颜色、字体等。这些值可能会导致工作冗余，并使得大型项目中的更改变得困难。
本指南以初学者友好的方式讲解了 CSS 变量（也称为 CSS 自定义属性），并逐步指导如何在用户执行点击等操作时使用 JavaScript 更改 CSS 值。

通过实施 CSS 变量，您可以简化设计流程并提高项目效率。

先决条件：理解本文需要具备 HTML 和 CSS 的基本知识。

什么是 CSS 变量？

您可能想知道 CSS（层叠样式表）中是否存在像编程语言中那样的“变量”，答案是“是”。CSS 变量也称为 CSS 自定义属性，是由 CSS 作者定义的实体，用于表示可在组件之间重用的某些值。

这意味着 CSS 为您提供了一个微小的值存储，可以在您的项目中尽可能多次引用。

让我们来分析一下，

想象一下，两个人正在合作一个项目，需要将品牌颜色从红色改为绿色。Person1 将项目中所有元素的颜色编辑为绿色，而 Person2 只需将其变量的 CSS 值更改为绿色，一切就都正常了。你更愿意成为 Person1 还是 Person2？

使用 CSS 变量的好处

提高代码的可读性和语义
使改变重复值变得更加容易。
使用 JavaScript 轻松动态更新值，提供响应用户操作或点击的灵活性。

如何声明 CSS 变量

可以使用两个破折号作为 CSS 样式属性名称的前缀以及任何有效的 CSS 值来声明 CSS 变量。

句法

--variable-name: value

根据您的具体需要，可以在本地或全局进行声明。

本地声明意味着在 CSS 选择器内声明变量，因此只能在该范围内访问。

/* this is a local declaration*/
header{
--brand-color: red
}

使用:root伪类进行全局声明。这使得变量可以被全局访问。

/* this is a global declaration*/
:root{
--brand-color: red
}

💡注意：CSS 变量名区分大小写，因此 primary-Color 和 primary-color 并不相同。

如何访问 CSS 变量

使用 var() 函数访问 CSS 变量。

selector{

property: var(--variableName)

}

如何使用 JavaScript 更改 CSS 变量

当用户执行特定操作时需要更改某些值时，这很有用。例如，当用户需要在您的网站上选择字体、颜色和主题时。

要根据用户的操作更改 CSS 值，您必须采取以下步骤；

步骤 1：设置 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./app.js"></script>
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Hello There</h1>
        <p>This is a paragraph</p>
        <button id="button" onclick="handleClick()">Change Color here</button>
    </header>
</body>
</html>

第 2 步：设置 CSS 样式；

:root{
    --primary-color: blue;
}
h1{
    color: var(--primary-color)
}
p{
    background-color: var(--primary-color);
}
button{
    border: 5px solid var(--primary-color)
}

输出

步骤 3：JavaScript；
操作 DOM（文档对象模型）并获取 CSS 选择器。例如：root

const changeButton = document.getElementById('button')
const root = document.querySelector(':root')

创建一个处理点击事件的函数。
在该函数中，使用“setProperty”方法更改根值。

function handleClick(event) {
root.style.setProperty('--primary-color', 'green')
}

Script.js

const changeButton = document.getElementById('button')
const root = document.querySelector(':root')
function handleClick(event) {
root.style.setProperty('--primary-color', 'green')
}

点击后输出

综上所述

此方法适用于任何 CSS 值，例如字体、宽度、颜色等。
要了解有关 CSS 样式属性的更多信息，请访问MDN

请查看我关于前端开发、网络最内部工作原理和如何克服技术中的冒名顶替综合症的其他文章。

请点赞、评论并关注更多与网络开发和技术相关的文章。

文章来源：https://dev.to/udoka033/css-variables-css-custom-properties-for-beginners-3oha