Question

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

Answer 1

假设您在服务器端设置了面板的可见性，那么检查document.getElementById()返回的值是否有效，前提是您确保使用正确的客户端面板控件的ID（不要对其进行硬编码）。

请参阅客户端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;
}

Answer 2

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

e.g：

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")。

Answer 3

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

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

Answer 4

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

Answer 5

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

实现的一种方法是在javascript中检查其ID。在jquery中，if（$（“＃mypanel”）。exists（））可以chek。在javascript中，请查看How to check if element exists in the visible DOM?

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

5 个答案: