如何在JavaScript中检查面板是否可见？_Javascript_Asp.net

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

javascript asp.net

如何在JavaScript中检查面板是否可见？,javascript,asp.net,Javascript,Asp.net,如何在JavaScript中检查面板是否可见？。我使用的是ASP.NET 2.0。如果Visible属性为false，则它将不会发送到客户端，甚至是隐藏的。ASP.NET在服务器端运行。因此，您可以使用document.getElementById搜索它，如果结果为空，则它不可见。面板是服务器端控件。如果其visible值为true，则可以在page source中看到具有相同id的div。如果其可见值为false，则该面板零件根本不会发送到客户端浏览器一种实现方法是在javascript中检

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

如果Visible属性为false，则它将不会发送到客户端，甚至是隐藏的。ASP.NET在服务器端运行。因此，您可以使用document.getElementById搜索它，如果结果为空，则它不可见。

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

一种实现方法是在javascript中检查其ID。在jquery中，如果$mypanel.exists可以检查。在javascript中，如果您使用的是jQuery，请查看此项-您是否尝试过该方法

e、 g:

如果面板隐藏在服务器端，并且任何jQuery效果/转换等都触发并隐藏了面板，那么这将起作用。只需检查是否存在，或者getElementById是否返回了一些不存在的内容

确保将客户端ID注入JavaScript中，然后检查：visible，这将保持快速查找。A.文件：

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

假设您正在服务器端设置面板的可见性，检查document.getElementById返回的值将起作用，前提是您确保使用的是正确的面板控件客户端ID，而不是硬编码

有关演示，请参阅客户端findPanel函数中的check

<!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>

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

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

OP清楚地表明他们正试图用JavaScript实现这一点。@RobCooper哇，伙计。以前使用过ASP.NET吗？如果面板服务器控件是不可见的，那么Javascript根本看不到它。OP没有说明是否在服务器端代码中使其不可见。@RobCooper OP states面板。对你们来说，这听起来像HTML标签吗？但你们提出了一个很好的观点——他们说了Panel，修改了我的否决票。我必须再次问你们：你们曾经使用过ASP.NET web表单吗？再一次，你们可能想在发出讽刺之前想一想，这将返回期望的结果，而不管面板是否隐藏在服务器端。如果jQuery找不到元素，它将返回一个空数组。启动JSFIDLE并亲自查看..我已经更新了我的答案-请记住，这将查看Panel.Visible是否为真/假，但如果应用，将不考虑和jQuery效果。感谢Ivan，感谢您的帮助。这确实对我有帮助。关于这个.var Panel=document.getElementById，我有一个问题，var panel=document.getElementByIdmasterpage的ContentPlaceHolderId.panelid，它会工作吗？我认为这不会工作，因为ContentPlaceholderId不会在后面的代码中实例化。你想在那里走动有什么问题？也许这是值得发布的另一个问题…好的一点，虽然你需要改变它返回；因为JavaScript不会将True解释为布尔值，所以它需要小写。@IvanKarajas这是正确的，谢谢。更新以反映该建议。

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;
}

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