使用 JavaScript 将内容样式添加到元素

Question

我有以下 HTML 标签：<div class="VINDesc">    <input class="toggle-box" id="toggle" onclick="sendVinCustomLink()">    <label class="VINDesc-label" for="toggle">foo?</label>    <p>NEW TEXT.</p></div标签css如下：.toggle-box + label:after {    background-color: #3b434a;    -webkit-border-radius: 2px;    -moz-border-radius: 2px;    border-radius: 2px;    color: #FFFFFF;    content: "+";    font-weight: bold;    height: 12px;    margin-left: 5px;    text-align: center;    padding: 0px 2px;}我的问题是当我点击它时如何添加这种样式：.toggle-box:checked + label:after {    content: "\2212";}到目前为止我尝试过的所有操作都没有更新该元素。我正在尝试使+标志变成-点击即可。我向 sendVinCustomLink() 函数添加了功能，但它似乎没有更新标签的相应css.知道如何做到这一点吗？

Answer 1

编辑：

一种方法是在 CSS 中将内容声明为 var，如下所示：

content:var(--content,"+");

然后定位并更改内容，如下所示：

div.style.setProperty("--content", "'-'")

此外，回答评论中有关将内容切换到之前的“+”状态的其他问题。只需应用一个boolean您可以为每次点击更改的值，如下所示：

var bool = false;

  if (bool === false) {

    div.style.setProperty("--content", "'-'")

    bool = true;

  } else if (bool === true) {

    div.style.setProperty("--content", "'+'")

    bool = false;

  }

通过上面的代码，我们可以根据我们声明为 的布尔值有效地更改内容字符串bool。当true我们看到+，当false我们看到-。

请参阅下面的片段：

var div = document.querySelector('.toggle-box + label');

var bool = false;

function changer() {

  if (bool === false) {

    div.style.setProperty("--content", "'-'")

    bool = true;

  } else if (bool === true) {

    div.style.setProperty("--content", "'+'")

    bool = false;

  }

}

.toggle-box+label:after {

  background-color: #3b434a;

  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

  border-radius: 2px;

  color: #FFFFFF;

  content: var(--content, "+");

  font-weight: bold;

  height: 12px;

  margin-left: 5px;

  text-align: center;

  padding: 0px 2px;

}

<div class="VINDesc">

  <input class="toggle-box" id="toggle" onclick="changer()">

  <label class="VINDesc-label" for="toggle">foo?</label>

  <p>NEW TEXT.</p>

</div>