在JavaScript模板文字中使用条件

时间:2018-08-14 12:46:35

标签: javascript

我将一个值存储在本地存储中,并根据该值决定模板文字符号内的样式。

这里有一些变量:

var right = localStorage.getItem("shareBarPosition") === "right";
var posRight = `#socialShare {
  left: auto;
  right: 0 !important;
}`;

var posLeft = `#socialShare {
  left: 0 !important;
  right: auto;
}`;
我想在这样的模板文字符号中使用

document.querySelector("#shareButton-code").innerHTML += `<style>
    /* Button specific styling */
    ${right ? posRight : posLeft}
</style>`

但这将始终显示posRight样式。为什么会这样?

1 个答案:

答案 0 :(得分:0)

我不得不将innerHTML +=更改为innerHTML =

document.querySelector("#shareButton-code").innerHTML = `<style>
  /* Button specific styling */
  ${!right ? posLeft : posRight}
</style>`