3

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

4

5 回答 5

9

假设您在服务器端设置面板的可见性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;
}
于 2012-05-07T05:45:12.630 回答
3

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

例如：

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

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

请务必将客户端 ID 注入 JavaScript ，然后检查:visible，这将使您的查找速度更快。A la 文档：

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

于 2012-05-07T05:38:51.817 回答
3

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

<script type="text/javascript>
   function IsPanelVisible() {
      return <%= pnlMessages.Visible.ToString().ToLower() %>
   }
</script>
于 2012-05-07T05:58:58.313 回答
1

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

于 2012-05-07T05:30:06.307 回答
1

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

一种实现方法是在 javascript 中检查其 ID。在 jquery 中， if($("#mypanel").exists()) 可以检查。在javascript中，检查一下如何检查可见DOM中是否存在元素？

于 2012-05-07T05:37:57.797 回答