javascript - javascript で要素をトグル (表示/非表示)

Question

このメソッドを使用すると、2 つのボタンを使用して要素を表示/非表示にできます。

<script type="text/javascript">
function showStuff(id) {
        document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}
</script>

<input type="button" onClick="hideStuff('themes')" value="Hide">
<input type="button" onClick="showStuff('themes')" value="Show">
<div id="themes" style="display:block">
    <h3>Stuff</h3>
</div>

単一のボタンを使用する方法はありますか?? たぶん、if＆else？

Answer 1

あなたはすでにあなたの質問に答えました... if/の使用else：

function toggle(id) {
    var element = document.getElementById(id);

    if (element) {
        var display = element.style.display;

        if (display == "none") {
            element.style.display = "block";
        } else {
            element.style.display = "none";
        }
    }
}

これは、要素を非表示/表示している場合、inlineまたはon要素にデフォルト以外の値を使用している場合（何らかの理由でdivを「インライン」に設定してから試行する場合など）、完全に確実なものではありません。この機能を使用するにはinline-blockdisplaydisplay

Answer 2

はいif/elseが機能します

function toggle(id){
    var elem = document.getElementById(id);
    if(elem.style.display == 'block'){
        elem.style.display == 'none'
    } else if(elem.style.display == 'none'){
        elem.style.display == 'block'
    }
}

Answer 3

次のような意味だと思います。

 function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == "block"){
    elem.style.display="none";
} else {
    elem.style.display="block";
}

}