Последние учебники веб-разработки
×

JavaScript Справка

обзор

JavaScript

JS строка JS Число JS операторы JS Заявления JS математический JS Дата JS массив JS логический JS RegExp JS Глобальный JS конверсионный

браузер BOM

Window Navigator Screen History Location

HTML DOM

DOM Документ DOM элементы DOM Атрибуты DOM Мероприятия DOM Стиль

HTML Объекты

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Другие объекты

CSSStyleDeclaration


 

Style display Property

<Style Object

пример

Установите <div> элемент не будет отображаться:

document.getElementById("myDIV").style.display = "none";
Попробуй сам "

Определение и использование

Дисплей наборы свойств или возвращают тип отображения элемента.

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

Свойство дисплей также позволяет автору показать или скрыть элемент. Это похоже на видимость собственности. Тем не менее, если вы установите дисплей: нет, он скрывает весь элемент, а видимость: скрытая означает, что содержимое элемента будет невидимыми, но элемент остается в исходном положении и размерах.

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

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Свойство дисплея поддерживается во всех основных браузерах.

Синтаксис

Возвращает свойство дисплея:

object .style.display

Установите свойство дисплея:

object .style.display= Значения свойств
Стоимость Описание
block Элемент отображается как элемент уровня блока
compact Элемент отображается как уровня блока или инлайн элемента. В зависимости от контекста
flex Элемент отображаются как гибкое поле блочного уровня. Новое в CSS3
inherit Значение свойства отображения наследуется от родительского элемента
inline Элемент отображаются как строковый элемент. Это по умолчанию
inline-block Элемент отображается как блок коробки внутри инлайн коробки
inline-flex Элемент отображается как гибкий поле инлайн-уровня. Новое в CSS3
inline-table Элемент отображается как инлайн таблицы (например, <table>), без разрыва строки перед или после таблицы
list-item Элемент отображается как список
marker Это значение задает содержимое до или после того, как коробки, чтобы быть маркером (используются с: до и:. После псевдо-элементов В противном случае это значение идентично «инлайн»)
none Элемент не будет отображаться
run-in Элемент отображается как уровня блока или инлайн элемента. В зависимости от контекста
table Элемент отображается как таблицы блоков (например, <таблица>), с разрывом строки до и после таблицы
table-caption Элемент отображается как заголовок таблицы (например, <заголовок>)
table-cell Элемент отображается как ячейки таблицы (например , <td> и <й>)
table-column Элемент отображаются как столбец ячеек (like <col>) , (like <col>)
table-column-group Элемент отображается как группы из одного или более столбцов (like <colgroup>) , (like <colgroup>)
table-footer-group Элемент отображается как таблица колонтитула строки (like <tfoot>) , (like <tfoot>)
table-header-group Элемент отображается как строки заголовка таблицы (like <thead>) , (like <thead>)
table-row Элемент отображается как строки таблицы (например, <TR>)
table-row-group Элемент отображается как группы из одного или нескольких строк (like <tbody>) , (like <tbody>)
initial Установка этого свойства в значение по умолчанию. Читайте о первоначальном
inherit Inherits это свойство от родительского элемента. Читайте о унаследовать

Технические подробности

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

Еще примеры

пример

Разница между свойством отображения и свойством видимости:

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

function demoVisibility() {
    document.getElementById("myP2").style.visibility = "hidden";
}
Попробуй сам "

пример

Разница между "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;
}
Попробуй сам "

пример

Возвращает тип отображения в <p> элемент:

alert(document.getElementById("myP").style.display);
Попробуй сам "

Похожие страницы

Учебник CSS: CSS Отображение и видимость

Ссылка CSS: display property

<Style Object