在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变量是动态的。