Как сделать разные лого для уведомлений?

Question

.ui-growl-image-error {
  width: 32px;
  height: 32px;
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  display: block;
  background: url("../res.belaz/image/messages.png") no-repeat;
}

.ui-growl-image {
  width: 32px;
  height: 32px;
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  display: block;
  background: url("../res.belaz/image/notification.png") no-repeat;
}

<span class="ui-growl-image ui-growl-image-error"></span>

Все уведомления приходят с одинаковым лого, можно ли как то перехватывать ошибки и в зависимости от этого выдавать разные логотипы?

Answer 1

Ну в общем как-то так:

const uiGrowlImage = document.querySelector('.ui-growl-image');

try {
  // Некоторый твой код

  // Если код выполнился успешно ставим класс success
  uiGrowlImage.classList.remove("error")
  uiGrowlImage.classList.add("success")
} catch {
  // Код в случае ошибки
  uiGrowlImage.classList.remove("success")
  uiGrowlImage.classList.add("error")
}

.ui-growl-image {
  width: 32px;
  height: 32px;
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  display: block;
}

.success {
  background: url("../res.belaz/image/notification.png") no-repeat;
  background-size: contain;
}

.error {
  background: url("../res.belaz/image/messages.png") no-repeat;
  background-size: contain;
}

<span class="ui-growl-image"></span>

БЛОГ НА HUSL

Как сделать разные лого для уведомлений?

Ответы (1 шт):