如何在CSS中添加自定义属性

在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。这些自定义属性以两个破折号（--）开头，并可以在任何CSS声明块中定义。然后，你可以使用var()函数来引用这些变量。

以下是如何在CSS中添加和使用自定义属性的步骤：

定义自定义属性

在CSS的根选择器（:root）或任何其他的CSS选择器内部定义自定义属性。这些属性通常被定义在:root选择器内部，这样它们就可以在整个文档中被访问。

:root {  --main-color: #007BFF;  --secondary-color: #6c757d;  --font-stack: Helvetica, sans-serif;  --transition-duration: 0.3s;  
}

使用自定义属性

使用var()函数来引用自定义属性。如果引用的属性不存在或无效，你可以提供一个回退值（fallback value）。

body {  color: var(--main-color);  background-color: var(--secondary-color);  font-family: var(--font-stack);  transition: all var(--transition-duration) ease;  
}  button {  color: var(--secondary-color, #ccc); /* 如果--secondary-color不存在或无效，将使用#ccc */  
}

 在JavaScript中操作自定义属性

你还可以在JavaScript中读取和修改自定义属性。这些属性将作为CSSStyleDeclaration对象上的属性被暴露出来，但它们的名称不包含--前缀。

// 读取自定义属性  
const mainColor = getComputedStyle(document.body).getPropertyValue('--main-color');  
console.log(mainColor); // 输出 "#007BFF"  // 修改自定义属性  
document.documentElement.style.setProperty('--main-color', '#ff0000');

注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。