javascript - 在js条件的“return”中设置图片或用“content”指定样式

Question

现在我有这个条件：

    function getArrow(num) {

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

但是我需要一张图片而不是箭头，所以我知道我可以用图片拉出样式，但是如何实现呢？

标签： javascriptcssreturnconditional-statements

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>

*使用符号代码而不是符号，因为编辑器/浏览器可能无法识别它们。