在 Polymer 中通过 JS 更改 CSS 变量答案

【问题标题】：Changing CSS variables via JS in Polymer在 Polymer 中通过 JS 更改 CSS 变量
【发布时间】：2015-08-13 18:53:15
【问题描述】：

在我的 Polymer 项目中，我有一个工具栏，其中包含我想使用 JavaScript 更改的颜色。由于 Polymer 在内部使用 CSS 变量 — paper-toolbar-background 来进行样式设置，因此我无法执行 style.color 之类的操作。我找到了一个名为setProperty() 的方法，但它对我不起作用。有人已经找到解决方案了吗？

【问题讨论】：

您是说您正在使用paper-toolbar 并尝试通过JavaScript 设置background-color CSS 属性？

标签： javascript css polymer

【解决方案1】：

在元素的 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>

【讨论】：

在此处查看另一个使用绑定数据属性来控制自定义样式的答案：stackoverflow.com/questions/36739078/…
为了将来参考，现在在 Polymer 2 中将其更改为单行 this.updateStyles({'--my-elem-visibility': 'visible'});

【解决方案2】：

基本上，

抓住元素
使用 customStyle 属性更改 --paper-toolbar-background
运行 element.updateStyles()

请参阅docs。 [编辑]如果你需要一个例子，我有一个here。

【讨论】：

【解决方案3】：

为当前Polymer.Element设置CSS变量：

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

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

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

【讨论】：