第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 JavaScript 將內(nèi)容樣式添加到元素

使用 JavaScript 將內(nèi)容樣式添加到元素

DIEA 2023-08-18 10:28:53
我有以下 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() 函數(shù)添加了功能，但它似乎沒有更新標簽的相應css.知道如何做到這一點嗎？
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻1821條經(jīng)驗 獲得超5個贊

編輯：


一種方法是在 CSS 中將內(nèi)容聲明為 var，如下所示：


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

然后定位并更改內(nèi)容，如下所示：


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

此外，回答評論中有關(guān)將內(nèi)容切換到之前的“+”狀態(tài)的其他問題。只需應用一個boolean您可以為每次點擊更改的值，如下所示：


var bool = false;


  if (bool === false) {

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

    bool = true;

  } else if (bool === true) {

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

    bool = false;

  }

通過上面的代碼，我們可以根據(jù)我們聲明為 的布爾值有效地更改內(nèi)容字符串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>


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號