How to Get and Set CSS Variable Values with JavaScript

CSS变量是一种非常受欢迎的语言添加，尽管它们非常基本。当然，我们可以使用SASS或手写笔，但语言永远不应该依赖于依赖框架和工具包的开发人员来完成我们所需要的。就像网页的其他部分一样，你可以获取和操作CSS变量值——让我们看看如何操作！

Setting and Using a CSS Variables

使用原生CSS变量的传统方法是将其添加到root：

:root {
    --my-variable-name: #999999;
}

简单。还要记住，CSS变量远不如SASS、手写笔等中的变量强大。

Getting a CSS Variable s Value

要在窗口中检索CSS变量的值，请使用getComputedStyle和getPropertyValue：

getComputedStyle(document.documentElement)
    .getPropertyValue( --my-variable-name ); // #999999

计算出的变量值返回为字符串。

Setting a CSS Variable s Value

要使用JavaScript设置CSS变量的值，请在documentElementsstyle属性上使用setProperty：

document.documentElement.style
    .setProperty( --my-variable-name ,  pink );

您将立即看到新值应用于变量使用的所有位置。

我已经预料到需要恶心的黑客来用JavaScript完成CSS变量操作，所以我很高兴它像上面描述的那样简单！