使用 javascript 切换（显示/隐藏）元素答案

【问题标题】：Toggle (show/hide) element with javascript使用 javascript 切换（显示/隐藏）元素
【发布时间】：2012-12-17 19:44:43
【问题描述】：

通过使用这种方法，我可以使用 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？

【问题讨论】：

使用 jQuery 的切换，玩得开心api.jquery.com/toggle
检查.style.display的值首先，然后相应地设置它的值。如果它被隐藏，请显示它。如果显示，请将其隐藏。
不可能那么难，比如：style.display = style.display == 'none' ? 'block' : 'none';

标签： javascript html css

【解决方案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 设置为“内联”（无论出于何种原因），然后尝试使用此功能

【讨论】：

【解决方案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'
    }
}

【讨论】：

【解决方案3】：

我认为你的意思是这样的：

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

}

【讨论】：

【解决方案4】：

这是另一种解决方案。除了使用document.getElementById，您还可以使用document.querySelector，它返回文档中与指定选择器或选择器组匹配的第一个元素。

解决方案代码：

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

【讨论】：