JavaScriptを使用して要素にコンテンツスタイルを追加する

bugfix> javascript > 投稿

私は次の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 。

これをどのように行うことができるか考えていますか？

編集#1：

https://imgur.com/a/jBDcDqX

javascript

html

css

回答 1 件

  • 編集：

    これを行う1つの方法は、次のようにCSSでコンテンツを変数として宣言することです。

    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>

あなたの答え

関連記事