요소를 표시하거나 숨기는 방법 :
요소를 표시하거나 숨기려면 요소의 style 속성을 조작하십시오 . 대부분의 경우 요소를 변경하고 싶을 것입니다.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있는 수단, 그 다음 5 월 있습니다. 즉, 요소 모음을 표시 할 때 충분할 있습니다.
선택적으로 원하는 display것을 두 번째 인수로 지정할 수 있습니다 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>