在這種情況下，我的 Upvote 按鈕是透明的，當我單擊它時，它的背景顏色會從透明變為綠色。當我再次單擊它時，我需要使該按鈕透明。我嘗試了以下代碼
<button class="btn btn-outline-success" id="upVote" onclick=vote()>upVote</button>
function vote(){
var upVoteBtn = document.getElementById("upVote");
upVoteBtn.style.backgroundColor = "green";
upVoteBtn.style.color = "black";
}
uj5u.com熱心網友回復：
正如@CBroe 所提到的，不要在js 中添加樣式，而是考慮創建一個具有您需要的樣式的類，toggle這個類帶有一個listener按鈕單擊。
document.getElementById("upVote").addEventListener("click", () => {
event.target.classList.toggle("upvoted")
}).upvoted{
background-color:green;
}<button id="upVote">upVote</button>uj5u.com熱心網友回復：
嘗試這個！
var btnToggle = true;
var upVoteBtn = document.getElementById("upVote");
function vote(){
if (btnToggle){
upVoteBtn.style.backgroundColor = "green";
btnToggle = false;
} else{
upVoteBtn.style.backgroundColor = null;
btnToggle = true;
}
}<button class="btn btn-outline-success" id="upVote" onclick=vote()>upVote</button>如果你想讓它透明，那么只需使用upVoteBtn.style.backgroundColor = "transparent";而不是null. 就像下面一樣。
var btnToggle = true;
var upVoteBtn = document.getElementById("upVote");
upVoteBtn.style.backgroundColor = "transparent";
function vote(){
if (btnToggle){
upVoteBtn.style.backgroundColor = "green";
btnToggle = false;
} else{
upVoteBtn.style.backgroundColor = "transparent";
btnToggle = true;
}
}<button class="btn btn-outline-success" id="upVote" onclick=vote()>upVote</button>謝謝和最好的問候！
uj5u.com熱心網友回復：
function vote(element){
element.classList.toggle("active");
}
.btn.active{
background:green;
color: #fff;
}
.btn{
background: transparent;
color: black;
}<button class="btn btn-outline-success" id="upVote" onclick=vote(this)>upVote</button> Solution of Problem
vote(this)發送按鈕元素toggle()用于添加和洗掉活動類.btn.active檢查按鈕是否有活動課程
uj5u.com熱心網友回復：
OP 應該使用Element.classList'stoggle方法...
function toggleVotingState({ currentTarget }) {
currentTarget.classList.toggle('voted');
}
document
.querySelector('#upVote')
.addEventListener('click', toggleVotingState);.voted {
color: black;
background-color: green;
}<button class="btn btn-outline-success" id="upVote">upVote</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487933.html
標籤：javascript html css 弹簧靴