要素を表示または非表示にする方法：
要素を表示または非表示にするには、要素のスタイルプロパティを操作します。ほとんどの場合、おそらく要素のdisplayプロパティを変更するだけです。
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
または、要素がスペースを占めるようにする場合（テーブルのセルを非表示にする場合など）、代わりに要素のvisibilityプロパティを変更できます。
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
要素のコレクションを非表示にする：
あなたは要素のコレクションを非表示にしたい場合は、単に各要素を反復処理し、要素の変更displayにはnone：
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
要素のコレクションを表示：
ほとんどの時間、あなたはおそらくちょうど間でトグルされるdisplay: noneとdisplay: block、以下のことを意味するかもしれ要素のコレクションを表示するときに十分なもので。
オプションdisplayで、デフォルトのにしたくない場合は、2番目の引数としてdesired を指定できますblock。
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
または、要素を表示するためのより良い方法は、インラインdisplayスタイルを削除して、要素を初期状態に戻すことです。次にdisplay、要素の計算されたスタイルをチェックして、カスケードされたルールによって非表示にされているかどうかを判断します。もしそうなら、要素を表示します。
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
（さらに一歩進めたい場合は、jQueryの動作を模倣し、要素にiframe（競合するスタイルシートを使用せずに）空白を追加して要素のデフォルトのブラウザスタイルを決定し、計算されたスタイルを取得することもできます。はdisplay要素の真の初期プロパティ値を知っているので、目的の結果を得るために値をハードコーディングする必要はありません。）
ディスプレイの切り替え：
同様に、display要素または要素のコレクションのを切り替える場合は、各要素を繰り返し処理して、displayプロパティの計算値を確認することで、要素が表示されているかどうかを確認できます。表示されている場合はdisplayをに設定しnone、そうでない場合はインラインdisplayスタイルを削除しdisplayますblock。それでも非表示の場合は、を指定された値またはハードコードされたデフォルトのに設定します。
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>