Question

我创建了一个下拉列表和标签并将它们包围在div中，但是，当我在以下函数中获取div时，它不会隐藏/取消隐藏标签和下拉列表？

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display == "none")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

我已将默认可见性设置为隐藏在css中，因为我希望隐藏元素，然后在单击复选框时显示。这是问题吗？ css总是隐藏元素吗？

#unis
{
    visibility:hidden;
}

<div class='row'>
    <label id='Recruitmentlbl' for='Recruitment'>Recruitment?:</label>
    <input id='Recruitment' name='Recruitment' class='formcbx' type='checkbox' onclick=ToggleDiv("unis")<br />
</div>

<div class='row'>
    <div id = "unis">
    <label id='Universitylbl' for='University'>University institution:</label>
    <select name="uni">
        <option value="uni1">uni1</option>
        <option value="uni2">uni2</option>
        <option value="uni3">uni3</option>
        <option value="uni4">uni4</option>
        <option value="uni5">uni5</option>
    </select><br />
    </div>
</div>

但它不起作用？

Answer 1

问题是JS无法真正读取CSS中设置的style.display。因此，当您对“无”进行测试时，可能返回的实际值可能是"none"或""（根本没有字符串。）

这很烦人，但是像这样对正面进行测试：

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display != "block")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

此外，visibility和display不是一回事。 Visibility设置是否可以看到对象，display设置是否具有“布局”。具有display:none;的div在页面上不占用空间，但是具有visibility:hidden;的div会占用空间。 因此，即使代码切换display值，您也需要切换visibility值。

Answer 2

如果你想从一些打字中保存自己（它也更快）：

function ToggleDiv(DivID) {
    var style = document.getElementById(DivID).style;
    style.display = (style.display != "none") ? "none" : "block";
}

<强> HTML

<p onclick="ToggleDiv('box')">toggle box</p>
<div id="box" style="display:none"></div>

关于可见性与显示问题。如果从用户的角度来看，差异很简单。

display: none看起来元素已被删除
visibility:hidden看起来元素已经隐藏

您可以在此处看到演示： visibility vs display

重点是两者不可互换：设置一个不会影响另一个。

HTML Javascript切换'select'的可见性即下拉？

2 个答案: