通过JS在Polymer中更改CSS变量 [英] Changing CSS variables via JS in Polymer

问题描述

在我的Polymer项目中，我有一个工具栏，我想用JavaScript改变颜色。因为Polymer在内部使用CSS变量 - paper-toolbar-background来进行样式化，所以我不能像style.color那样做。我发现了一个名为 setProperty（）的方法，但它不适用于我。有没有人找到了解决方案？

解决方案

在元素的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>有些内容会出现在这里。< / div> 
< / template> 
< / dom-module> 
 
< script> 
 Polymer（{
 
 is：'my-elem'，
 
 setVisible：function（visible）{
 this.customStyle [' -  my -elem-visibility'] ='visible'; 
 this.updateStyles（）; 
} 
}）; 
< / script> 
  

In my Polymer project, I have a toolbar with a color I want to change using JavaScript. Since Polymer uses the CSS variable — paper-toolbar-background internally for styling, I can't do something like style.color. I found a method named setProperty(), but it doesn't work for me. Has anyone already found a solution?

解决方案

Set the variable value in the element's customStyle map then call the updateStyle method.

Here is an example of an element that changes its own visibility by modifying the value of a custom style that it defines. The variable can be external as well.

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

这篇关于通过JS在Polymer中更改CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！