HTML DOM Style display

Свойство display

Пример style.display

Задайте элемент <div> так, чтобы он не отображался:

document.getElementById("myDIV").style.display = "none";

Описание display

Свойство display устанавливает или возвращает тип отображения элемента.

Элементы в HTML в основном являются "строчными" или "блочными" элементами: строчный элемент имеет плавающее содержимое слева и справа. Блочный элемент заполняет всю строку, и ничего не может быть отображено слева или справа.

Свойство display также позволяет автору показывать или скрывать элемент. Оно похоже на свойство visibility. Однако если задать display:none, оно скроет весь элемент, тогда как visibility:hidden означает, что содержимое элемента будет невидимым, но элемент останется в своем исходном положении и размере.

Совет:Если элемент является блочным, его тип отображения также можно изменить с помощью свойства float.

Поддержка display

Свойство
display	Да	Да	Да	Да	Да

Синтаксис display

Вернуть свойство display:

object.style.display

Установите свойство display:

object.style.display = value

Значение свойства display

Значение	Описание
block	Элемент отображается как элемент блочного уровня.
compact	Элемент отображается как блочный или встроенный элемент. Зависит от контекста
flex	Элемент отображается как блочный flex-box. Новое в CSS3
grid	Элемент отображается как сетка на уровне блока. Новое в CSS3
inherit	Наследует это свойство от родительского элемента. Читайте о inherit
initial	Устанавливает это свойство в значение по умолчанию. Читайте о initial
inline	Элемент отображается как встроенный элемент. Это значение по умолчанию
inline-block	Элемент отображается как блочный блок внутри встроенного блока.
inline-flex	Элемент отображается как встроенный flex-box. Новое в CSS3
inline-grid	Элемент отображается как сетка строчного уровня. Новое в CSS3
inline-table	Элемент отображается как встроенная таблица (типа <table>) без переноса строки до или после таблицы.
list-item	Элемент отображается как список
marker	Это значение устанавливает содержимое до или после поля в качестве маркера (используется с псевдоэлементами :before и :after. В противном случае это значение идентично "inline").
none	Элемент не будет отображен
run-in	Элемент отображается как блочный или встроенный элемент. Зависит от контекста
table	Элемент отображается как блочная таблица (типа <table>) с переносом строки до и после таблицы.
table-caption	Элемент отображается как заголовок таблицы (например, <caption>)
table-cell	Элемент отображается как ячейка таблицы (например, <td> и <th>)
table-column	Элемент отображается как столбец ячеек (например, <col>)
table-column-group	Элемент отображается как группа из одного или нескольких столбцов (например, <colgroup>)
table-footer-group	Элемент отображается как строка нижнего колонтитула таблицы (например, <tfoot>)
table-header-group	Элемент отображается как строка заголовка таблицы (например, <thead>)
table-row	Элемент отображается как строка таблицы (например, <tr>)
table-row-group	Элемент отображается как группа из одной или нескольких строк (например, <tbody>)

Технические детали display

Значение по умолчанию:	inline
Возвращаемое значение:	Строка, представляющая тип отображения элемента.
CSS Версия	CSS1

Ещё примеры display

Разница между свойством display и свойством visibility:

function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}

function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}

Попробуйте сами »

Переключение между скрытием и отображением элемента:

function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
}
}

Попробуйте сами »

Разница между "inline", "block" и "none":

function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}

Попробуйте сами »

Вернуть свойство display типа объекта <p> элемент:

alert(document.getElementById("myP").style.display);

Попробуйте сами »