자바 스크립트에서 객체를 동적으로 숨기는 방법

Question

계정으로 로그인 할 수있는 웹 페이지가 있습니다. 아이디어는 당신이 작은 사각형이 나타납니다 (stackoverflow가하는 것과 비슷합니다) 당신의 기본 정보 (이름, 이메일 등)를 가지고 나타납니다. 그것은 PHP, CSS, 자바 스크립트의 혼합이지만 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()에 갈 것이며 내가 상자 그래서 내 자바 스크립트 코드를 삽입 할 위치를 알 필요가 처음에는 숨겨져 있습니다. 내가 presssed 때 상자 보여주는 은 내가 showUser() 함수에서이 코드를 퍼팅 시도 :

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

을하지만 그것은 작동하지 않았다. 보이는 것처럼 보이기 때문에 나는 숨겨 놨다.

당신이 그것을 할 수있는 올바른 방법이다

Answer 1

감사하지만 당신은에서 getElementById와 자바 스크립트 코드가 작동 할 스타일 속성 사이에 점이 필요합니다. 당신이 갖고 싶어 요소가 숨김으로 시작하거나 그것을 클래스

visibility:hidden; 

를 제공하거나 숨겨진 요소에 대한 인라인 스타일로 넣을 수 있습니다. 또한 load 이벤트가 발생하면 javascript에서이를 수행 할 수 있지만 HTML에서 렌더링하는 것이 더 좋습니다. 렌더링하는 데 오랜 시간이 걸리면 준비 이벤트가 발생할 때까지 숨겨져 있어야하는 내용을 사용자가 볼 수 있기 때문입니다. 행운을 빌어 요.

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

Answer 2

또한이 작업을 수행 할 수 그것을 할 올바른 방법입니다

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

Answer 3

또는 JQuery와 :