如何检查该面板在 JavaScript 中是不是可见?
Posted
技术标签:
【中文标题】如何检查该面板在 JavaScript 中是不是可见?【英文标题】:How to check that panel is visible or not in JavaScript?如何检查该面板在 JavaScript 中是否可见? 【发布时间】:2012-05-15 15:58:36 【问题描述】:如何检查该面板在 javascript 中是否可见?。我正在使用 ASP.NET 2.0。
【问题讨论】:
【参考方案1】:假设您在服务器端设置面板的可见性,只要您确保使用面板控件的正确客户端 ID(不要' t 硬编码)。
查看客户端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;
【讨论】:
我已经更新了我的答案 - 请记住,这将查看Panel.Visible
是否为真/假,但不会考虑 jQuery 效果(如果应用)。
感谢 Ivan,您的帮助。它真的帮助了我。
我对此有一个疑问。(var panel = document.getElementById(""))。如果我写的不是上面的,var panel = document.getElementById( masterpage的contenplaceholderid.panelid),它会工作吗
我认为这行不通,因为 ContentPlaceHolderID 没有在代码隐藏中实例化。你想解决什么问题?也许值得将此作为另一个问题发布......【参考方案2】:
如果您使用的是 jQuery - 您是否尝试过 visible selector
?
例如:
if ($("#test").filter(":visible").length > 0)
/* visible */
else
/* invisible */
如果面板在服务器端隐藏,并且任何 jQuery(效果/过渡等)已触发并隐藏面板,这将起作用。只需检查exists
或getElementById
是否返回某些内容不会。
确保将客户端 ID 注入 JavaScript 然后检查 :visible
,这将保持您的快速查找。参考文档:
因为 :visible 是一个 jQuery 扩展,而不是 CSS 规范的一部分,所以使用
:visible
的查询无法利用原生 DOMquerySelectorAll()
方法提供的性能提升。要在使用:visible
选择元素时获得最佳性能,请先使用纯 CSS 选择器选择元素,然后使用.filter(":visible")
。
【讨论】:
我不得不再次问你:你曾经使用过 ASP.NET Web 表单吗? 再一次,你可能想在讽刺之前考虑一下,这将返回所需的结果,而不管面板是否隐藏在服务器端。如果 jQuery 找不到元素,它会返回一个空数组。启动一个 jsFiddle 并亲自看看..【参考方案3】:一种简单的方法是将当前可见值从 ASP.NET 直接传递到 javascript。
<script type="text/javascript>
function IsPanelVisible()
return <%= pnlMessages.Visible.ToString().ToLower() %>
</script>
【讨论】:
好点,尽管您需要将其更改为return <%= pnlMessages.Visible.ToString().ToLower() %>;
,因为 JavaScript 不会将“True”解释为布尔值(它需要小写)。
@IvanKarajas 这是正确的,谢谢。更新以反映建议。【参考方案4】:
面板是服务器端控件。如果它的 visible 值为 true,您可以在页面源中看到具有相同 id 的 div。如果它的 visible 值为 false,则该面板部分根本不会发送到客户端浏览器。
实现的一种方法是在 javascript 中检查其 ID。在 jquery 中, if($("#mypanel").exists()) 可以检查。在 javascript 中,请查看 How to check if element exists in the visible DOM?
【讨论】:
【参考方案5】:如果Visible
属性为假,则根本不会发送到客户端(甚至隐藏)。 ASP.NET 在服务器端运行它。所以,你可以直接使用document.getElementById(<%= panel.ClientID %>)
搜索,如果结果为空,则不可见。
【讨论】:
OP 明确声明他们正在尝试在 JavaScript 中执行此操作。 @RobCooper 哇,伙计。以前用过 ASP.NET 吗?如果面板(服务器控件)不可见,则 Javascript 根本看不到它。 别讽刺我了。 OP 没有说明他们是否在服务器端代码中使其不可见。 @RobCooper OP 状态 面板。这听起来像是 HTML 标记吗? 但是你提出了一个很好的观点——他们确实说面板,修改了我的反对票。以上是关于如何检查该面板在 JavaScript 中是不是可见?的主要内容,如果未能解决你的问题,请参考以下文章
如何从 C# 或 Javascript 检查文件是不是存在?
如何在javascript中执行if语句来检查JSON数组是不是为空?