В моем проекте Polymer у меня есть панель инструментов с цветом, который я хочу изменить с помощью JavaScript. Поскольку Polymer использует переменную CSS - бумагу-панель инструментов - внутренне для стилизации, я не могу сделать что-то вроде style.color. Я нашел метод с именем setProperty()
, но он не работает для меня. Кто-нибудь уже нашел решение?
Изменение переменных CSS через JS в Polymer
Ответ 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()
Ответ 3
Чтобы установить переменную CSS для текущего Polymer.Element
:
this.updateStyles({'--paper-toolbar-background': '#ed0'});
Чтобы установить глобальную переменную:
Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});