如何在JavaScript中檢查該面板是否可見？

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 ？

例如：

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中，檢查一下如何檢查可見DOM中是否存在元素？

如何在JavaScript中檢查該面板是否可見？

問題描述

5 個解決方案

解決方案1
8 已采納 2012-05-07 05:45:12

解決方案2
3 2012-05-07 05:38:51

解決方案3
3

解決方案4
1 2012-05-07 05:30:06

解決方案5
1 2012-05-07 05:37:57

如何在JavaScript中檢查該面板是否可見？

問題描述

5 個解決方案

解決方案1 8 已采納 2012-05-07 05:45:12

解決方案2 3 2012-05-07 05:38:51

解決方案3 3

解決方案4 1 2012-05-07 05:30:06

解決方案5 1 2012-05-07 05:37:57

解決方案1
8 已采納 2012-05-07 05:45:12

解決方案2
3 2012-05-07 05:38:51

解決方案3
3

解決方案4
1 2012-05-07 05:30:06

解決方案5
1 2012-05-07 05:37:57