如何检查面板在 JavaScript 中是否可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10477080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check that panel is visible or not in JavaScript?
提问by Jui Test
How do I check that panel is visible or not in JavaScript?. I am using ASP.NET 2.0.
如何检查面板在 JavaScript 中是否可见？。我正在使用 ASP.NET 2.0。
回答by Ivan Karajas
Assuming that you are setting the panel's visibility on the server-side, a check of the value returned by document.getElementById()will work, provided you ensure that you're using the the correct client ID of the panel control (don't hard-code it).
假设您在服务器端设置面板的可见性，检查由 返回的值document.getElementById()将起作用，前提是您确保使用面板控件的正确客户端 ID（不要对其进行硬编码） .
See the check in the client-side findPanel()function for a demonstration.
有关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>
The following code in the code-behind file toggles the panel's visibility when btnToggleis clicked:
代码隐藏文件中的以下代码在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;
}
回答by Ivan Karajas
A simple way would be to pass the current visible value from ASP.NET to the javascript directly.
一种简单的方法是将当前可见值从 ASP.NET 直接传递给 javascript。
<script type="text/javascript>
function IsPanelVisible() {
return <%= pnlMessages.Visible.ToString().ToLower() %>
}
</script>
回答by Rob Cooper
If you're using jQuery - have you tried the visible selector?
如果您正在使用 jQuery - 您是否尝试过visible selector？
e.g:
例如：
if ($("#test").filter(":visible")????????.length > 0) {
/* visible */
} else {
/* invisible */
}
This will work if the panel is hidden on the server side, and also if any jQuery (effects/transitions etc.) have fired and hidden the panel. Just checking existsor if getElementByIdreturns something will not.
如果面板在服务器端隐藏，并且任何 jQuery（效果/过渡等）已触发并隐藏面板，这将起作用。只是检查exists或如果getElementById返回一些东西不会。
Be sure to inject the client side ID into the JavaScript and thencheck for :visible, this will keep your lookups fast. A la the docs:
请务必将客户端 ID 注入 JavaScript ，然后检查:visible，这将使您的查找速度更快。A la 文档：
Because :visible is a jQuery extension and not part of the CSS specification, queries using
:visiblecannot take advantage of the performance boost provided by the native DOMquerySelectorAll()method. To achieve the best performance when using:visibleto select elements, first select the elements using a pure CSS selector, then use.filter(":visible").
因为 :visible 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用查询
:visible无法利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在使用:visible选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用.filter(":visible").
回答by McGarnagle
If the Visibleproperty is false, then it will not be sent to the client at all (even hidden). ASP.NET runs that at the server side. So, you can just search for it using document.getElementById(<%= panel.ClientID %>), and if the result is empty, then it's not visible.
如果该Visible属性为 false，则它根本不会发送给客户端（甚至是隐藏的）。ASP.NET 在服务器端运行它。因此，您可以使用 搜索它document.getElementById(<%= panel.ClientID %>)，如果结果为空，则它不可见。
回答by Jonas T
Panel is serverside control. If its visible value is true, you can see div with the same id in page source. If its visible value is false, that panel part isn't sent to client browser at all.
面板是服务器端控制。如果它的visible值为true，就可以在页面源码中看到相同id的div。如果它的可见值为 false，则该面板部分根本不会发送到客户端浏览器。
One way to achieve is check its ID in javascript. In jquery, if($("#mypanel").exists()) can chek. In javascript, check this out How to check if element exists in the visible DOM?
实现的一种方法是在 javascript 中检查其 ID。在 jquery 中， if($("#mypanel").exists()) 可以检查。在 javascript 中，查看如何检查元素是否存在于可见 DOM 中？
