使用javascript将标签设置为可见答案

【问题标题】：Setting the label to visible using javascript使用javascript将标签设置为可见
【发布时间】：2016-08-16 04:25:55
【问题描述】：

我有这个 Asp.net 页面，我正在尝试设置标签和图像可见，并在客户端点击事件的标签中显示文本。

这是asp代码：

 <td align="right">
     <asp:Image ID="AlertPic" runat ="server" Visible="false" ImageUrl="~/images/i_AlertWarning.png" />
     <asp:Label ID="lblError" runat ="server" Visible="false" CssClass="errorMessage"></asp:Label>
</td>

在javascript方面：

function xx(sender,eventArgs){
     document.getElementById('lblError').style.visibility = "visible";
     document.getElementById('AlertPic').style.visibility = "visible";
     document.getElementById('lblError').innerHTML = "Please fill in Search Criteria";
}

这不起作用。

【问题讨论】：

我认为你应该参考下面的答案how can i visible an invisible control with jquery

标签： javascript asp.net

【解决方案1】：

     function CLick()
            {

                $("#<%=lblError.ClientID%>").toggleClass("visibleoff");


            };

 .visibleoff{
           display:none;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="right">
     <asp:Image ID="AlertPic" runat ="server"  CssClass="" ImageUrl="../Content/img/images.jpg" onClick="CLick();" />
     <asp:Label ID="lblError" runat ="server" CssClass="errorMessage visibleoff" Text="hi this is the error"></asp:Label>
</td>

使用 JQuery 选择器和 CSS 类

这里是代码，您只需将其包含在您的代码中并尝试一下，希望它可以帮助您

【讨论】：

【解决方案2】：

更新您的 html 代码

 <td align="right">
   <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" style="display:none"  />
   <asp:Label ID="lblError" runat ="server" CssClass="errorMessage" style="display:none"></asp:Label>
 </td>

和你的 javascript 代码

   function xx(){
      document.getElementById('<%=lblError.ClientID %>').style.visibility = "visible";
      document.getElementById('<%=AlertPic.ClientID %>').style.visibility = "visible";
      document.getElementById('<%=lblError.ClientID %>').innerHTML = "Please fill in Search Criteria";
   }

希望对你有所帮助。

【讨论】：

【解决方案3】：

使用 visibility = hidden 或 visibility = visible insted 的 div。

<div id ="image" visibility = "hidden">

    <asp:Image ID="AlertPic" runat ="server" ImageUrl="~/images/i_AlertWarning.png" />
    <asp:Label ID="lblError" runat ="server" CssClass="errorMessage"></asp:Label>

</div>

现在只需将具有 id 图像的 div 设置为可见或隐藏，因为它默认是隐藏的

【讨论】：

【解决方案4】：

Visible 属性，当设置为 false 时，将导致您的特定控件根本不会在 DOM 中呈现：

获取或设置一个值，该值指示服务器控件是否为在页面上呈现为 UI。

因此，如果它从未被渲染，它将无法通过 Javascript 访问。你最好通过 display:none 或 visibility: hidden 样式通过 CSS 隐藏元素，然后它实际上会被渲染和访问：

<asp:Image ID="AlertPic" ... style='visibility:none' />
<asp:Label ID="lblError" ... style='visibility:none'></asp:Label>

【讨论】：

【解决方案5】：

如果你想在客户端进行操作，你不能做可见（因为控件不会被渲染，所以不能访问 DOM）... 使用 CSS 显示样式为“无”，然后在客户端切换。

<asp:Label ID="lblError" runat ="server" style="display:none" CssClass="errorMessage"></asp:Label>

让它可见

document.getElementById('lblError').style.display = 'inherit';

隐藏它

document.getElementById('lblError').style.display = 'none';

【讨论】：

您的clientid可能在客户端不同。你试过这个 '<%=lblError.ClientID %>' 而不是 lblError 吗？

【解决方案6】：

您不能因为Visible 属性控制控件的呈现。也许你应该用一些 CSS 来隐藏它。

【讨论】：