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プロパティを設定できます。表示/非表示するには、2つのプロパティを使用できます：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値が自動的に使用されます。要素のタイプ（インラインまたはブロック）を気にする必要はありません。また、elem唯一のDOM要素だけでなく、セレクタのようなことができない#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要素の 'hidden'属性を使用します。

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

CSSを使用して非表示にする

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

JavaScriptを使用して表示する

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