Question

我有一个隐藏的div元素。

<div class= "CTL" id="CTL" runat="server" style="display:none">
<p class ="divider">
CTL
    </p>
            <asp:Button ID="CTL_button" runat="server" Text="View CTL" 
            onclick="CTL_button_Click" />
</div>

我试图根据页面上返回的SQL值显示div元素或保持隐藏： -

   window.onload= function show_CTL() {
    if("<%=_CurrentUser.IsCTL%>" == "True"){
       document.getElementById('CTL').style.display ="block";
     }
     else{
         // document.getElementById('CTL').style.display ="none";
         }

但无论返回的值是什么，div元素仍会显示...

似乎只有循环的真实部分才会被执行......

Answer 1

使用display：none将div隐藏在第一位

<div class= "CTL" id="CTL" style="display:none" runat="server">
<p class ="divider">
CTL
    </p>
            <asp:Button ID="CTL_button" runat="server" Text="View CTL" 
            onclick="CTL_button_Click" />
</div>

然后你可以用

显示它

   document.getElementById('CTL').style.display ="block";

Answer 2

ASP.NET正在更改ID，这就是你必须获取元素的clientID的原因。

document.getElementById("<%= CTL.ClientID %>").style.display = "block";

Answer 3

visible和display是2种不同的css属性，
您先设置visible，但稍后更改display，
你应该改变可见，而不是显示，因为你可以在第一时间使用显示而不是可见。

Answer 4

将条件转换为JavaScript中的Boolean，您可以这样做：

window.onload = function show_CTL() {
    var el = document.getElementById('CTL');

    if(Boolean("<%=_CurrentUser.IsCTL%>") && el){
        el.style.display = "block";
    }
    else{
        el.style.display = "none";
    }
}

如果Boolean对象没有初始值，或者传递的值是以下值之一：

0
-0
null
""
false
undefined
NaN

该对象设置为false。对于任何其他值，它设置为true（即使使用字符串＆＃34; false＆＃34;）！

现在我想知道，为什么不简单地在visible属性中添加条件？

<div class="CTL" id="CTL" runat="server" visible=<%=_CurrentUser.IsCTL%>></div>

这种方式不需要JavaScript。

Div元素隐藏和显示

4 个答案: