在运行时获取Css变量值

Question

我正在开发一个用Polymer编写的应用程序。

我有一些像这样定义的CSS变量：

Current: website.com/main/page.php
Want: website.com/page.php

用户字面上选择“1”，“2”或“3”。我有一个看起来像这样的函数：

:root {
  --my-option-1: #ff8a80;
  --my-option-2: #4a148c;
  --my-option-3: #8c9eff;
}

我需要// The v parameter will be 1, 2, or 3 function getOptionColor(v) { var name = '--my-option-' + v; return ?; } 根据输入到函数中的值返回getOptionColor，#ff8a80或#4a148c。但是，我不知道如何在运行时获取CSS变量的值。有没有办法做到这一点？如果是这样，怎么样？

Answer 1

您可以使用通过javascript来转发样式表的API。请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets

使用文档，您将看到如何遍历样式表属性。

Answer 2

您应该能够使用

读写CSS变量

this.customStyle['--my-toolbar-color']

或

this.customStyle['--my-toolbar-color'] = value;

如果从Polymer元素中执行此操作，则变量在此元素的样式标记中声明 全局变量可能有一种方法，但我还没有发现它。