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>
添加回答
舉報