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

╰半夏微凉° 2023-02-22 01:28 50阅读 0赞

CSS variables are a very welcome addition to the language, despite them being incredibly basic.  Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need.  And just like every other part of a webpage, you can get and manipulate CSS variable values -- let's check out how!

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

## 设置和使用CSS变量 **(**Setting and Using a CSS Variables**)** ##

The traditional method of using native CSS variables is adding it to `root`:

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

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

Simple.  Also remember that CSS variables are nowhere near as powerful as variables within SASS, stylus, etc.

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

## 获取CSS变量的值 **(**Getting a CSS Variable's Value**)** ##

To retrieve the value of a CSS variable within the window, you use `getComputedStyle` and `getPropertyValue`:

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

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

The computed variable value comes back as a string.