📌  相关文章
📜  javascript 获取 css 变量 - Javascript (1)

📅  最后修改于: 2023-12-03 14:42:37.552000             🧑  作者: Mango

获取 CSS 变量的 JavaScript 方法

在前端开发中，一些可变的值通常通过 CSS 变量来定义。这些变量可以在样式表中定义，并在整个网站中使用。但是，如果您需要以编程方式获取这些变量的值，则可以使用 JavaScript 来完成它。本文将介绍如何使用纯 JavaScript 和 jQuery 方法来获取 CSS 变量。

简介

CSS 变量是在 CSS 中定义的，可以在整个页面中使用以保持一致性。它们以两个减号（--）开头，后跟一个名称和一个值。例如：

:root {
  --primary-color: #007bff;
}

在上面的示例中，root 伪类指定全局的 CSS 变量，定义了一个名为 primary-color 的变量 whose 值为 #007bff。

要将此变量应用于样式，您可以使用 var() 函数并传递变量名：

.heading {
  color: var(--primary-color);
}
获取 CSS 变量的方法
使用纯 JavaScript

使用 JavaScript，可以通过 getComputedStyle() 和 getPropertyValue() 方法获取 CSS 变量的值。以下代码演示如何获取名为 --primary-color 的变量的值：

const element = document.querySelector('.heading');
const style = getComputedStyle(element);
const value = style.getPropertyValue('--primary-color');
console.log(value);

该代码使用 document.querySelector() 方法选择具有 .heading 类的元素，使用 getComputedStyle() 方法获取计算后的样式，然后使用 getPropertyValue() 方法检索 --primary-color 变量的值并将其存储在 value 变量中。最后，可以将值记录在控制台上或使用它来执行其他操作。

使用 jQuery

在 jQuery 中，可以使用 css() 方法以类似的方式获取 CSS 变量的值。以下代码演示如何获取名为 --primary-color 的变量的值：

const value = $('.heading').css('--primary-color');
console.log(value);

该代码使用 $('.heading') 选择具有 .heading 类的元素，并使用 .css() 方法检索 --primary-color 变量的值并将其存储在 value 变量中。最后，可以将值记录在控制台上或使用它来执行其他操作。

结论

CSS 变量是一种强大的工具，使您可以轻松定义、管理和使用可变的值。使用 JavaScript，您可以获取这些变量的值并将其用于网站的其他部分。无论是使用原生 JS 还是 jQuery。

参考文献