[分享]css中定义一个变量在其他地方使用

发布于 2024-11-11 19:16:16

在 CSS 中，有时候我们需要定义一些颜色、字体等样式属性的变量，这样方便我们在多个地方使用。定义方法如下：:root { primarycolor: 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 来获取指定变量的值。

这样就可以方便地在多个地方使用同一个样式属性，也方便了代码维护。

一个月内的热帖推荐

Lv.1普通用户

62849 帖子	14 小组	291 积分

帖子

小组

291

积分

发帖	回复	分享

赞助商广告

本组热帖