Как динамически скрыть объект в JavaScript

Question

У меня есть веб-страница, на которой вы можете войти под своей учетной записью. Идея состоит в том, что когда вы нажимаете свое имя, появляется небольшой квадрат (аналогично тому, что делает stackoverflow) с некоторой базовой информацией (имя, адрес электронной почты и т. Д.). Это смесь php, css и javascript, но php предназначен только для выбора. имя пользователя. Итак, у меня есть следующий код:

<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>

В какой-то части страницы ...: Добро пожаловать, посетитель!

Посетитель фактически настраивается через php для пользователя, который вошел в систему, или посетителя, если такового нет. Вот коробка:

<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>

Итак, мне нужно, чтобы окно появлялось, когда я нажимаю посетителя, поэтому код должен идти в showUser (), и мне нужно знать, где я должен поместить свой код JavaScript, чтобы изначально окно было скрыто. Для отображения окна при нажатии я попытался вставить этот код в функцию showUser ():

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

Но это не сработало. Я спрятал его, потому что он начинается как видимый.

Спасибо

Answer 1

Вы также можете сделать это:

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

Answer 2

Это правильный способ сделать это, но вам нужно иметь точку между getElementById и свойством стиля, чтобы код javascript работал.Если вы хотите, чтобы элемент начинался как скрытый, либо задайте ему класс, где

visibility:hidden;

, либо вы можете поместить его в качестве встроенного стиля для скрытого элемента.Вы также можете сделать это в javascript, когда сработает событие загрузки, но лучше сделать это в html, потому что, если визуализация страницы занимает много времени, пользователь увидит то, что должно быть скрыто, пока не сработает событие ready.Желаем удачи.

Answer 3

Или JQuery:

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