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

Answer 2

基本上，

1. 抓取元素
2. 使用 customStyle 属性来更改 --paper-toolbar-background
3. 运行 element.updateStyles()

请参阅文档。[编辑]如果你需要一个例子，我这​​里有一个。