如何使用JavaScript获取和设置CSS变量值

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

设置和使用CSS变量

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

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

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

获取CSS变量的值

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

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

计算出的变量值以字符串形式返回。

设置CSS变量的值

要使用JavaScript设置一个CSS变量的值，可以使用setProperty 上documentElement的style 属性：

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

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

我已经预料到需要使用令人恶心的骇客才能使用JavaScript完成CSS变量操作，所以我很高兴如上所述那样简单！