已解决：如何使用 javascript 更改 css 变量

这个问题没有单一的答案，因为这两种语言以不同的方式处理变量赋值和操作。 然而，一般来说，尝试使用 JavaScript 更改 CSS 变量的一个问题是这两种语言使用不同的语法来声明和访问变量。 此外，CSS 变量通常是在样式表级别定义的，而不是在单个元素级别定义的，这使得它们很难从 JavaScript 代码中访问。

var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");

此代码行正在为 CSS 变量设置新值。 第一行获取 ID 为“element”的元素。 第二行将 CSS 变量“–variable”的值设置为“new-value”。

CSS 变量

CSS 变量是一种无需使用全局变量即可在 CSS 文件中存储数据的好方法。 您可以使用它们来存储信息，例如当前页面的宽度或高度，或当前字体大小。

要在 JavaScript 代码中使用 CSS 变量，首先需要在文档的样式表中包含 css 属性。 然后，您可以使用 var 关键字定义变量：

var width = document.getElementById(“myElement”).offsetWidth;

您还可以使用 css 属性访问变量中的各个值：

var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;

控制CSS

在 JavaScript 中，有几种方法可以控制 CSS。 一种方法是使用 css 属性。 此属性允许您为文档中的特定元素设置样式。

另一种控制 CSS 的方法是使用 style 属性。 此属性允许您为文档中的所有元素设置样式。