亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

使用 JavaScript 將內容樣式添加到元素

使用 JavaScript 將內容樣式添加到元素

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() 函數添加了功能,但它似乎沒有更新標簽的相應css.知道如何做到這一點嗎?
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

編輯:


一種方法是在 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>


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號