javascript - 在 Polymer 中通过 JS 更改 CSS 变量

Question

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

Answer 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>