Button要素のクラスを変更して表示/非表示にします

Question

コード内の特定の条件に基づいてボタン要素を表示または非表示にしようとしています。ボタンのデフォルトCSSをdisplay: noneで「隠す」ようにしてから、表示を変更するクラスを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と.visibleの間にスペースを入れてはいけません。

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。

display:noneを.invisibleに設定する必要があります。ない#show。

Answer 4

シンプルです。これを書く：代わりの

#show.visible { 
    display: block; 
} 

を：

#show .visible { 
    display: block; 
} 

（ジャストあなたは#showとの間に置くスペースを削除 .visible）それは