Добавить стили в существующий класс с угловым

Question

В моем приложении много классов, и я хочу установить стиль с помощью кода (функция создания тем).

например. <button class="mybutton">click</button>

Мне нужно что-то вроде:

<style>
    .mybutton{
        background-color: {{company?.buttonBackgroundColor}}!important;
    }
</style>

но, конечно, это не работает. Что было бы хорошим решением без замены всех существующих классов?

РЕДАКТИРОВАТЬ: угловой 2+, не угловой js. извините

Answer 1

Я бы предложил другой подход к теме. Создайте файл * .css, переопределяющий необходимые правила для каждой темы, и динамически добавляйте соответствующую таблицу стилей в DOM, когда вы хотите переключить тему (посмотрите Как загрузить файлы CSS с помощью Javascript? , чтобы узнать, как сделай это).

Answer 2

Для меня хорошим решением была vanilla js:

var selects = document.getElementsByClassName('mybutton')
        for (var i = 0, il = selects.length; i < il; i++) {
            selects[i].style.color = this.company.buttonForegroundColor;

        }

Answer 3

В angular вы можете просто получить доступ к элементу и изменить его класс. Вы можете делать больше вещей, например, изменять его свойства, но я думаю, что работа с классами более удобна. Затем вы используете классы добавления в DOM, используя:

var myEl = angular.element( document.querySelector( '#div1' ) );
myEl.addClass('alpha');

Здесь вы можете найти некоторые идеи для этого: https://stackoverflow.com/a/30410490/5250103

Также еще одним хорошим решением было бы использование условных классов (ngClass): https://stackoverflow.com/a/16529903/5250103

Там он объясняет:

Директива ngClass будет работать с любым выражением, которое оценивает true или false, немного похожее на выражения Javascript, но с некоторыми отличиями вы можете прочитать о здесь . Если ваше условие слишком сложное, вы можете использовать функцию, которая возвращает true или false, как вы делали это в своей третьей попытке.

Пример, приведенный здесь

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Я не собираюсь красть какой-либо ответ, но, как предлагается в комментариях, он был отредактирован и цитирует его авторов.

Надеюсь, это поможет!