如何在JavaScript中动态隐藏对象

Question

I have a webpage where you can log in with your account. The idea is that when you press your name a small square appears (similar to what stackoverflow does) with some of your basic information (name, email, etc.) It's a mix of php, css and javascript but the php is only to chose the name of the user. So, I have the following code:

<style type="text/css">
table.UserInfo
{
    background-color:#000;
    width:100;
    height:100;
    position:fixed;
    top:10px;
    right:10px;
}
p.UserText
{
    color:#FFF;
}
</style>
<script type="text/javascript">
function showUser()
{
    //Unknown code here
}
</script>

In some part of the page...: Welcome visitor !

The visitor is actually set via php to a user that logged in or visitor if there is none. Here is the box:

<table class='UserInfo' id='UserInfo' >
<tr>
<td><p class='UserText'>This user is a guest user. There is no information available.</p></td>
</tr>
</table>

So, I need the box to appear when I press visitor, so the code would go in showUser() and I need to know where I have to put my javascript code so the box is initially hidden. For the box showing when I presssed it I tried putting this code in the showUser() function:

document.getElementById('UserInfo')style.visibility = 'hidden';

But it didn't work. I put it hidden because it starts of as visible.

Thank you

Answer 1

您也可以这样做：

var_name = document.getElementById("idname").style.display = 'none';

Answer 2

That is the correct way to do it but you need to have a dot between the getElementById and the style property for the javascript code to work. If you want to have the element start off as hidden either give it a class where

visibility:hidden;

or you can put it as the inline style for the hidden element. You could also do it in javascript when the load event fires but it is better to do it in the html because if the page takes a long time to render then the user will see what was supposed to be hidden until the ready event fires. Best of luck.

Answer 3

或jQuery：

$('.anyClass').fadeOut('fast');