CODEWITHSUNDEEP
javascriptcsspolymer
Sir_baaron
Sir_baaron

Reputation: 385

Changing CSS variables via JS in Polymer

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?

Upvotes: 10

Views: 8918

Answers (3)

Keith
Keith

Reputation: 155662

To set the CSS variable for the current Polymer.Element:

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

To set the variable globally use:

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

Upvotes: 1

jptknta
jptknta

Reputation: 817

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>

Upvotes: 16

mmm111mmm
mmm111mmm

Reputation: 4085

Basically,

  1. Grab the element
  2. Use the customStyle property to alter --paper-toolbar-background
  3. Run element.updateStyles()

Please see the docs. [Edit] If you need an example, I've one here.

Upvotes: 4

Related Questions