Установите изображение в «return» в состоянии js или назначьте стиль с «content»

Question

Теперь у меня есть это условие:

    function getArrow(num) {

    if(num > 0) return "↑";
    if(num === 0) return "-";
    else return "↓";
}

Но мне нужны картинки вместо стрелок, чтобы я понимал, что могу подтянуть стиль с картинкой, но как его реализовать?

Answer 1

Альтернативой является создание стилей, а функция getArrow() возвращает последнюю часть имени стиля.

Таким образом, вы можете помещать изображения в блоки стилей.

function getArrow(num) {
  if (num > 0) return "up";
  if (num === 0) return "none";
  else return "down";
}

document.querySelector('span').classList.add('ui-arrow-' + getArrow(5));

.ui-arrow-up::after {
  content: '\2191'
}

.ui-arrow-down::after {
  content: '\2193'
}

.ui-arrow-none::after {
  content: '\203e'
}

<span>EleFromStack</span>

* Используйте коды символов вместо символов, поскольку некоторые редакторы / браузеры могут их не распознавать.