Javascript 在聚合物中通过JS改变CSS变量

在我的Polymer项目中，我有一个工具栏，上面有一种我想用JavaScript更改的颜色。由于Polymer在内部使用CSS变量纸工具栏背景进行样式设置，所以我不能像style.color这样做。我找到了一个名为

setProperty（）

的方法，但它不适合我。有人已经找到解决办法了吗？

基本上

抓住元素

使用customStyle属性更改--图纸工具栏背景

运行element.updateStyles（）

---

请看地图。[编辑]如果需要示例，我有一个。

在元素的customStyle映射中设置变量值，然后调用updateStyle方法

下面是一个元素的示例，该元素通过修改其定义的自定义样式的值来更改其自身的可见性。变量也可以是外部变量

<dom-module id="my-elem">

  <style>
    :host {
      display: block;
      --my-elem-visibility: hidden;
    }
    #child {
       visibility: var(--my-elem-visibility)
    }
  </style>
  <template>
    <div id="child">Some content goes here.</div>
  </template>
</dom-module>

<script>
   Polymer({

      is: 'my-elem',

      setVisible: function (visible) {
          this.customStyle['--my-elem-visibility'] = 'visible';
          this.updateStyles();
      }
   });
</script>

：主持人{
显示：块；
--我的元素可见性：隐藏；
}
#孩子{
可见性：var（--我的元素可见性）
}
这里有一些内容。
聚合物({
是‘我的元素’，
setVisible:函数（可见）{
this.customStyle['--my elem visibility']='visible'；
this.updateStyles（）；
}
});

为当前的

Polymer.Element

设置CSS变量：

this.updateStyles({'--paper-toolbar-background': '#ed0'});

要全局设置变量，请使用：

Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});

---

您是说您正在使用

纸张工具栏

，并试图通过JavaScript设置

背景色

CSS属性吗？请检查此处，以获得另一个使用绑定数据属性来控制自定义样式的答案：为供将来参考，这在Polymer 2中现在更改为单行

this.updateStyles({--my elem visibility'：'visible'}）；