如何切换文档元素的可见性？答案

【问题标题】：How to toggle the visibility of a document element?如何切换文档元素的可见性？
【发布时间】：2016-03-30 23:55:24
【问题描述】：

我的表单上有这样的标签：

<asp:Label ID="lblPwPol" 
     runat="server"
     Visible="false">

  A bunch of text... 

</asp:Label>

在 Page_Load 事件 (VB.net) 调用的方法中，我附加了一些 JS 事件处理程序：

    btnPasswordPolicies.Attributes.Add("onClick", "return mShowToolTip();")
    cmdPasswordPolicies.Attributes.Add("onmouseleave", "return mHideToolTip();")

定义如下：

function mShowToolTip(aCtrl, aArg1)
{
    document.getElementById("lblPwPol").style.display = 'block';
    return false;

}

function mHideToolTip()
{
    document.getElementById("lblPwPol").style.display = 'none';
    return false; 
}

当我的表单加载时，标签不可见（正确）。

当我点击标签时，我的 JS 中出现异常：

Javascript 运行时错误：无法获取未定义或空引用的属性“样式”

这显然意味着document.getElementById("lblPwPol") 返回null。

知道我做错了什么吗？我觉得这一定是一些愚蠢的事情，但我根本不懂 JS。

我也尝试将id="lblPwPol" 改为name="lblPwPol"，但这并没有什么不同。

【问题讨论】：

使用asp.net控件时，控件在html中渲染时id不同。您的 id='lblPwPol' 在 html 中有所不同。因此，您可以使用document.getElementById('"<%= lblPwPol.ClientID %>"') 而不是使用document.getElementById('lblPwPol')，您的代码应该可以正常工作。
如果您尝试@Sushil 的建议，您应该只使用一组引号：document.getElementById('<%= lblPwPol.ClientID %>')。但真正的问题是@Kris 报告的问题：由于Visible="false"，标签不在您的HTML 输出中。

标签： javascript asp.net

【解决方案1】：

首先你应该删除标签上的 visible="false" ，因为你让它可见 false 它不会加载到 Dom 中。并保持 style="display:none" 像这样

<asp:Label ID="lblPwPol" 
 runat="server"
 Style="display:none">

  A bunch of text... 

   </asp:Label>

【讨论】：

【解决方案2】：

我认为您将 DOM 元素与 ASP WebUI WebControl elements 混淆了（顺便说一句，它们也是 XML）。看看这里如何访问像你这样的标签控件：How to access asp:label text property from code behind?

【讨论】：