如何检查该面板在 JavaScript 中是否可见？答案

【问题标题】：How to check that panel is visible or not in JavaScript?如何检查该面板在 JavaScript 中是否可见？
【发布时间】：2012-05-15 15:58:36
【问题描述】：

如何检查该面板在 JavaScript 中是否可见？。我正在使用 ASP.NET 2.0。

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

假设您在服务器端设置面板的可见性，只要您确保使用面板控件的正确客户端 ID（不要' t 硬编码）。

查看客户端findPanel()函数中的检查以进行演示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function findPanel() {
            var panel = document.getElementById("<%= pnlMyPanel.ClientID %>");
            if (panel) {
                alert("Panel is visible");
            }
            else {
                alert("Panel is not visible");
            }

//        // And this would work too:
//        alert((<%= pnlMyPanel.Visible.ToString().ToLower() %>) ? "Panel is visible": "Panel is not visible");

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel runat="server" ID="pnlMyPanel">
            <p>
                This is a panel.</p>
        </asp:Panel>
        <asp:Button runat="server" ID="btnToggle" Text="Toggle panel visibility..." />
        <input type="button" value="Do client-side visibility check..." onclick="javascript:findPanel();" />
    </div>
    </form>
</body>
</html>

代码隐藏文件中的以下代码在单击btnToggle 时切换面板的可见性：

protected void Page_Load(object sender, EventArgs e)
{
    btnToggle.Click += new EventHandler(btnToggle_Click);
}

void btnToggle_Click(object sender, EventArgs e)
{
    pnlMyPanel.Visible = !pnlMyPanel.Visible;
}

【讨论】：

我已经更新了我的答案 - 请记住，这将查看 Panel.Visible 是否为真/假，但不会考虑 jQuery 效果（如果应用）。
感谢 Ivan，您的帮助。它真的帮助了我。
我对此有一个疑问。(var panel = document.getElementById(""))。如果我写的不是上面的，var panel = document.getElementById( masterpage的contenplaceholderid.panelid），它会工作吗
我认为这行不通，因为 ContentPlaceHolderID 没有在代码隐藏中实例化。你想解决什么问题？也许值得将此作为另一个问题发布......

【解决方案2】：

如果您使用的是 jQuery - 您是否尝试过 visible selector？

例如：

if ($("#test").filter(":visible").length > 0) {
    /* visible */
} else {
    /* invisible */
}

如果面板在服务器端隐藏，并且任何 jQuery（效果/过渡等）已触发并隐藏面板，这将起作用。只需检查exists 或getElementById 是否返回某些内容不会。

确保将客户端 ID 注入 JavaScript 然后检查 :visible，这将保持您的快速查找。参考文档：

因为 :visible 是一个 jQuery 扩展，而不是 CSS 规范的一部分，所以使用 :visible 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。要在使用:visible 选择元素时获得最佳性能，请先使用纯 CSS 选择器选择元素，然后使用 .filter(":visible")。

【讨论】：

我不得不再次问你：你曾经使用过 ASP.NET Web 表单吗？
再一次，你可能想在讽刺之前考虑一下，这将返回所需的结果，而不管面板是否隐藏在服务器端。如果 jQuery 找不到元素，它会返回一个空数组。启动一个 jsFiddle 并亲自看看..

【解决方案3】：

一种简单的方法是将当前可见值从 ASP.NET 直接传递到 javascript。

<script type="text/javascript>
   function IsPanelVisible() {
      return <%= pnlMessages.Visible.ToString().ToLower() %>
   }
</script>

【讨论】：

好点，尽管您需要将其更改为 return <%= pnlMessages.Visible.ToString().ToLower() %>;，因为 JavaScript 不会将“True”解释为布尔值（它需要小写）。
@IvanKarajas 这是正确的，谢谢。更新以反映建议。

【解决方案4】：

面板是服务器端控件。如果它的 visible 值为 true，您可以在页面源中看到具有相同 id 的 div。如果它的 visible 值为 false，则该面板部分根本不会发送到客户端浏览器。

实现的一种方法是在 javascript 中检查其 ID。在 jquery 中， if($("#mypanel").exists()) 可以检查。在 javascript 中，请查看 How to check if element exists in the visible DOM?

【讨论】：

【解决方案5】：

如果Visible 属性为假，则根本不会发送到客户端（甚至隐藏）。 ASP.NET 在服务器端运行它。所以，你可以直接使用document.getElementById(<%= panel.ClientID %>)搜索，如果结果为空，则不可见。

【讨论】：

OP 明确声明他们正在尝试在 JavaScript 中执行此操作。
@RobCooper 哇，伙计。以前用过 ASP.NET 吗？如果面板（服务器控件）不可见，则 Javascript 根本看不到它。
别讽刺我了。 OP 没有说明他们是否在服务器端代码中使其不可见。
@RobCooper OP 状态面板。这听起来像是 HTML 标记吗？
但是你提出了一个很好的观点——他们确实说面板，修改了我的反对票。