使用 javascript 使面板可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3930067/
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
Make Panel visible using javascript
提问by Fire Hand
I have a Panel with property, Visible set to False
我有一个带有属性的面板，可见设置为 False
<asp:Panel ID="pnlUpload" runat="server" Visible="False" />
and i try to make it visible using javascript as code below
我尝试使用 javascript 作为下面的代码使其可见
document.getElementById('<%= Panel1.ClientID %>').style.visibility = 'visible';
but it's not working, any idea guys?
但它不起作用，伙计们有什么想法吗？
回答by Kay
Setting Visible="false" makes the panel not to render in the generated HTML. If you want to make it show/hide in the client side, you need to make it Visible="true" and use a CSS class/in the style attribute having "display" property with the value "block" or "none" as required.
设置 Visible="false" 使面板不在生成的 HTML 中呈现。如果你想让它在客户端显示/隐藏，你需要让它 Visible="true" 并使用 CSS 类/在具有 "display" 属性的样式属性中，值为 "block" 或 "none" 作为必需的。
回答by Chris Wagner
I am answering this with zero ASP experience but a lot of JS/HTML/CSS experience so bear with me if I am completely wrong...
我用零 ASP 经验回答这个问题，但有很多 JS/HTML/CSS 经验，所以如果我完全错了，请耐心等待......
I would say that the Visible="False"tag is not equivalent to the CSS style="visibility:hidden;"therefore that JS call will have no effect.
我会说Visible="False"标签不等同于 CSS，style="visibility:hidden;"因此 JS 调用将不起作用。
回答by mizzos
In order to display asp controls you need to use the property
为了显示 asp 控件，您需要使用该属性
ClientVisible
Example:
例子：
<asp:Panel ID="someId" runat="server" ClientInstanceName="someIdClient" ClientVisible="False" />
As mentioned in a previous post the attribute
如上一篇文章所述，属性
Visible="False"
leads to not rendering the control.
导致不呈现控件。
In order to access the hidden control via Javascript you simply type:
为了通过 Javascript 访问隐藏控件，您只需键入：
function myFunction(){ someIdClient.SetVisible(true)
回答by sayem
I tried .style.visibility = 'visible' and visible="true" and .style.display = 'block' and .style.display = 'inline' all those thing does not work. but if you write .style.display = 'none' it work. any body know the solution Please let me know Thanks
我试过 .style.visibility = 'visible' and visible="true" 和 .style.display = 'block' 和 .style.display = 'inline' 所有这些都不起作用。但是如果你写 .style.display = 'none' 就行了。任何人都知道解决方案请告诉我谢谢
回答by Roto
don't use visibility use this..
不要使用可见性使用这个..
document.getElementById("<%=myPanel.ClientID%>").style.display = "none"; //not visible
document.getElementById("<%=myPanel.ClientID%>").style.display = "inline"; //visible回答by rasata
I answering with almost zero ASP experience, like Flash84x :-)
我的 ASP 经验几乎为零，例如 Flash84x :-)
It seems that in asp, when you set "Visibile=false", the panel is not created.
似乎在asp中，当您设置“Visibile=false”时，不会创建面板。
And if you would like to use custom JavaScript and not the .NET facility to display, hide a panel you should apply a style directly in the tag like this:
如果您想使用自定义 JavaScript 而不是 .NET 工具来显示，隐藏面板，您应该直接在标签中应用样式，如下所示：
<asp:Panel id="pnlUpload" runat="server"
Style="visibility:hidden;background-color:#CC9999;
color:#FFFFFF; width:200; height:200;
border:solid 1; padding:10">
.....
颜色：#FFFFFF；宽度：200；高度：200；边框：实心1；填充：10"> .....
And then it will rendere somthing like this in html :
然后它会在 html 中渲染这样的东西：
<div id="pnlUpload" class="text" style="visibility:hidden;
background-color:#CC9999; color:#FFFFFF; width:200; height:200; border:solid 1; padding:10"> .....
背景色：#CC9999; 颜色：#FFFFFF；宽度：200；高度：200；边框：实心1；填充：10"> .....
</div>
And of course the corresponding javascript would be:
当然，相应的 javascript 将是：
<script language="JavaScript">
document.getElementById('pnlUpload').style.visibility = 'visible';
</script>
回答by kbvishnu
Please put your panel in a div and change the style using the following way
请将您的面板放在 div 中并使用以下方式更改样式
<div>
<asp:Panel ID="pnlUpload" runat="server" Visible="False" />
</div>
javascript
javascript
function visible()
{
document.getElementById('<%=pnlUpload.ClientID %>').style.display = 'block'
}
