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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

DIEA 2023-08-18 10:28:53
我有以下 HTML 標(biāo)簽：<div class="VINDesc">? ? <input class="toggle-box" id="toggle" onclick="sendVinCustomLink()">? ? <label class="VINDesc-label" for="toggle">foo?</label>? ? <p>NEW TEXT.</p></div標(biāo)簽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;}我的問(wèn)題是當(dāng)我點(diǎn)擊它時(shí)如何添加這種樣式：.toggle-box:checked + label:after {? ? content: "\2212";}到目前為止我嘗試過(guò)的所有操作都沒(méi)有更新該元素。我正在嘗試使+標(biāo)志變成-點(diǎn)擊即可。我向 sendVinCustomLink() 函數(shù)添加了功能，但它似乎沒(méi)有更新標(biāo)簽的相應(yīng)css.知道如何做到這一點(diǎn)嗎？
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊

編輯：


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


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

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


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

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


var bool = false;


  if (bool === false) {

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

    bool = true;

  } else if (bool === true) {

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

    bool = false;

  }

通過(guò)上面的代碼，我們可以根據(jù)我們聲明為 的布爾值有效地更改內(nèi)容字符串bool。當(dāng)true我們看到+，當(dāng)false我們看到-。


請(qǐng)參閱下面的片段：


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>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

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