在 CSS 中，有时候我们需要定义一些颜色、字体等样式属性的变量，这样方便我们在多个地方使用。定义方法如下：:root { --primary-color: #007bff; /* 定义变量 */ }
在 CSS 中，有时候我们需要定义一些颜色、字体等样式属性的变量，这样方便我们在多个地方使用。
定义方法如下：
:root {
--primary-color: #007bff; /* 定义变量 */
} 这里我们使用了 :root 伪类，这个伪类匹配文档根元素，一般来说就是 <html> 元素。在其中我们可以使用 -- 作为前缀定义变量名，然后给它们赋值。
定义好变量后，在其他样式中可以直接使用它：
.header {
background-color: var(--primary-color); /* 使用变量 */
} 这里的 var() 函数就是用来调用定义的变量的，其中传入变量名即可。
除了在样式中直接使用外，我们也可以在 JavaScript 代码中使用：
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color'); 使用 getComputedStyle 函数可以获取到文档根元素的样式，然后再通过 getPropertyValue 来获取指定变量的值。
这样就可以方便地在多个地方使用同一个样式属性，也方便了代码维护。
粉丝
0
关注
0
收藏
0
