Як показати або приховати елемент:
Щоб показати або приховати елемент, маніпулюйте властивістю стилю елемента . У більшості випадків ви, мабуть, просто хочете змінити 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як другий аргумент, якщо ви не хочете, щоб це було за замовчуванням 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>