首頁猿問使用 JavaScript...

使用 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>

反對回復 2023-08-18

1 回答
0 關注
133 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

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

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

1 回答

添加回答