在JavaScript模板文字中使用條件

Question

我將一個值存儲在我的本地存儲中，並根據該值決定模板文字符號內的樣式。

這里我有一些變量：

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樣式。 這是為什么？

Answer 1

我不得不將innerHTML +=更改為innerHTML =

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