Изменение переменных CSS через JS в Polymer

В моем проекте Polymer у меня есть панель инструментов с цветом, который я хочу изменить с помощью JavaScript. Поскольку Polymer использует переменную CSS - бумагу-панель инструментов - внутренне для стилизации, я не могу сделать что-то вроде style.color. Я нашел метод с именем setProperty(), но он не работает для меня. Кто-нибудь уже нашел решение?

Ответы

Ответ 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>

Ответ 2

В принципе,

  • Возьмите элемент
  • Используйте свойство customStyle для изменения - paper-toolbar-background
  • Запустить элемент .updateStyles()

См. docs. [Edit] Если вам нужен пример, у меня есть здесь.

Ответ 3

Чтобы установить переменную CSS для текущего Polymer.Element:

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

Чтобы установить глобальную переменную:

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