更改類按鈕元素的顯示/隱藏

Question

我試圖顯示或隱藏基於在我的代碼一定標準的按鈕元素。我已經用display: none使該按鈕的默認css「隱藏」它，然後添加一個將顯示更改爲display: block的類。

HTML：

<div> 
    <button id="show">SHOW</button> 
</div> 

CSS：

#show { 
    display: none; 
} 

#show .visible { 
    display: block; 
} 

JS：

var d = document.getElementById('show'); 
d.className += "visible"; 

我也曾嘗試：

var d = document.getElementById('show'); 
d.classList.add("visible"); 

除了：

documnet.getElementById('show').classList.add('visible'); 

的問題是，我不能讓全班同學正確應用，當類更新將不會顯示該按鈕。我敢肯定，我忽略了一些簡單的東西，只是不確定是否有人能夠提供幫助。

Answer 1

你把階級 「可見」 有id爲 「秀」 在相同的元素。

所以在你的CSS應該不是#show和。可見之間的空間。

HTML

<div> 
    <button id="show">SHOW</button> 
</div> 

CSS

#show { 
    display: none; 
} 

#show.visible { 
    display: block; 
} 

JS

var d = document.getElementById('show'); 
d.classList.add("visible"); 

Answer 2

請使用此方法！

除了更改ID的切換類hide這樣按鈕是可見或不可見的！

function myFunction() { 
 
    var element = document.getElementById("show"); 
 
    element.classList.toggle("hide"); 
 
}

.hide{ 
 
    display:none; 
 
} 
 

 
#show{ 
 
    display: block; 
 
}

<div> 
 
    <button id="show">SHOW</button> 
 
</div> 
 
<button onClick="myFunction()">Toggle</button>

Answer 3

document.getElementById('show').classList.add('visible');

#show { 
 
    /*display: none;*/ 
 
} 
 
.invisible{ 
 
    display: none; 
 
} 
 
.visible { 
 
    display: block; 
 
}

<div> 
 
    <button id="show" class="invisible">SHOW</button> 
 
</div>

我想推薦使用2個班級。 .visible，.invisible。

您應該.invisible設置display:none。不是#show。

Answer 4

簡單。這樣寫：

#show.visible { 
    display: block; 
} 

相反的：

#show .visible { 
    display: block; 
} 

（只是你#show和之間把刪除空格。可見）