JavaScript로 DIV를 표시하고 숨기는 방법

다음과 같이 할 수 있습니까?

function showDiv()
{
    [DIV].visible = true;
    //or something
}

[DIV]가 요소이면

[DIV].style.visibility='visible'

또는

[DIV].style.visibility='hidden' 

jQuery와 같은 라이브러리를 사용하지 않는다고 가정 해 보겠습니다.

DOM 요소에 대한 참조가 아직없는 경우 다음을 사용하여 가져옵니다. var elem = document.getElementById('id');

그런 다음 해당 요소의 CSS 속성을 설정할 수 있습니다. 표시 / 숨기기 위해 약간 다른 효과가있는 display및 두 가지 속성을 사용할 수 있습니다 visibility.

조정 style.display은 요소가 전혀 존재하지 않는 것처럼 보입니다 ( "제거됨").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

또는 style.visibility실제로 div가 여전히 존재하지만 "모두 비어 있음"또는 "모두 흰색"이되도록합니다.

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

jQuery를 사용하는 경우 display속성 을 설정하려는 한 더 쉽게 할 수 있습니다 .

$(elem).hide();
$(elem).show();

자동으로 적절한 display값을 사용합니다 . 요소 유형 (인라인 또는 블록)에 대해 신경 쓸 필요가 없습니다. 또한, elemDOM 요소 일뿐만 아니라 #id또는 .class유효한 CSS3 (및 그 이상!)과 같은 선택자가 될 수 있습니다 .

당신은 사용할 수 있습니다 visibility또는 display그러나 당신은 변경 적용 할 필요가 div.style객체가 아닌 div객체 자체를.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

DOM 함수 인 setAttribute 및 removeAttribute를 사용할 수 있습니다. 다음 링크에는 사용 방법에 대한 예가 있습니다.

setAttribute 및 removeAttribute 함수

빠른보기 :

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

opacity비슷한 것을 사용할 수 visibility 있지만 원활하게 전환하고 높이와 같은 다른 매개 변수를 제어 할 수 있습니다 (스 니펫 단순성을 위해 js 로직을 html에 직접 넣습니다. 프로덕션 코드에서는 수행하지 마십시오)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

DOM 요소의 '숨김'속성 사용 :

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

CSS를 사용하여 보이지 않게 만들기

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

자바 스크립트를 사용하여 표시

document.getElementById('div_id').style.visibility = 'visible';