使用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>

有沒有辦法使用單個按鈕？ 也許如果＆其他？

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或inline-block元素， 或者您使用非默認值在元素上display ，例如將div的display設置為“inline”（對於“內聯”，則不會完全萬無一失無論什么原因）然后嘗試使用此功能

Answer 2

是的，否則將起作用

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";
}

}

Answer 4

這是另一種解決方案。 您也可以使用document.querySelector而不是使用document.getElementById ，它返回文檔中與指定選擇器或選擇器組匹配的第一個Element 。

解決方案代碼

function toggleShow() {
    var elem = document.querySelector(id);
    if(elem.style.display == 'inline-block'){
      elem.style.display="none";
    }
    else {
      elem.style.display = "inline-block";
    }
  }