Главная » Языки программирования

Html javascript style display

Содержание
  1. Javascript DOM Style display Property
  2. Browser Compatibility
  3. Syntax
  4. Property Values
  5. Default Value
  6. Return Value
  7. More Examples
  8. Example
  9. Example
  10. Example
  11. Related
  12. Все значения свойства display
  13. Значение none
  14. Значение block
  15. Значение inline
  16. Значение inline-block
  17. Значения table-*
  18. Вертикальное центрирование с table-cell
  19. Значения list-item, run-in и flex
  20. Style display Property
  21. Browser Support
  22. Syntax
  23. Property Values
  24. Technical Details
  25. More Examples
  26. Example
  27. Example
  28. Example
  29. Example

Javascript DOM Style display Property

The display property gets and sets the element’s display type.

The HTML elements are mostly «inline» or «block» elements:

  • An inline element has floating content on its left and right side.
  • A block element fills the entire line.

In other words, an inline element can share the same line with other elements, while the block element always starts a new line.

The display property can show or hide an element.

It is similar to the visibility property.

If you set display:none, it hides the entire element and removes it from the layout, while visibility:hidden means that the element will be invisible, but the element occupy in its original position and size.

If an element is a block element, its display type can also be changed with the float property.

Browser Compatibility

Syntax

Return the display property:

let a = object.style.display;
object.style.display = value;

Property Values

Value Element is rendered as
block a block-level element
compact

Default Value

Return Value

A String, representing the display type of an element.

More Examples

Difference between the display property and the visibility property:

function demoDisplay() < document.getElementById("myP1").style.display = "none"; > function demoVisibility() < document.getElementById("myP2").style.visibility = "hidden"; >
!DOCTYPE html> html> body> p id="myP1">This is some text. p id="myP2">This is some text. input type="button" onclick="demoDisplay()" value="Hide text with display property"> input type="button" onclick="demoVisibility()" value="Hide text with visibility property"> script> function demoDisplay() !-- w w w . d e m o 2 s . c o m--> document.getElementById("myP1").style.display = "none"; > function demoVisibility() < document.getElementById("myP2").style.visibility = "hidden"; >

Example

Toggle between hiding and showing an element:

function myFunction() < let x = document.getElementById('myDIV'); if (x.style.display === 'none') < x.style.display = 'block'; > else < x.style.display = 'none'; > >
!DOCTYPE html> html> head> style> #myDIV !-- w w w . d e m o 2 s. c o m --> width: 500px; height: 500px; background-color: lightblue; >  body> p>Click the "Test" button to toggle between hiding and showing the DIV element: button onclick="myFunction()">Test div id="myDIV"> This is my DIV element. p>b>Note: The element will not take up any space when the display property set to "none". script> function myFunction() < let x = document.getElementById('myDIV'); if (x.style.display === 'none') < x.style.display = 'block'; > else < x.style.display = 'none'; > >

Example

Difference between «inline», «block» and «none»:

let whichSelected = x.selectedIndex; let sel = x.options[whichSelected].text; let elem = document.getElementById("mySpan"); elem.style.display = sel;
!DOCTYPE html> html> body> p>Select a display type in the list below to change span id="mySpan" style="color:blue;">this span element's  display type. select onchange="myFunction(this);" size="3"> option>block option>inline option>none !-- w w w . d e m o 2 s . c o m --> script> function myFunction(x) < let whichSelected = x.selectedIndex; let sel = x.options[whichSelected].text; let elem = document.getElementById("mySpan"); elem.style.display = sel; >

Example

Return the display type of a

element:

console.log(document.getElementById("myP").style.display);
!DOCTYPE html> html> body> p id="myP" style="display:none;">This is a p element. button type="button" onclick="myFunction()"> Return the display type of p  p id='demo'>  script> function myFunction() < document.getElementById('demo').innerHTML = document.getElementById("myP").style.display; >

  • Javascript DOM Style cssFloat Property
  • Javascript DOM Style cursor Property
  • Javascript DOM Style direction Property
  • Javascript DOM Style display Property
  • Javascript DOM Style emptyCells Property
  • Javascript DOM Style filter Property
  • Javascript DOM Style flex Property

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Все значения свойства display

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

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div ( 
Я - невидим!
 ) Стоит внутри скобок

Значение block

  • Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
  • Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

  • Элементы располагаются на той же строке, последовательно.
  • Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Во всём остальном – это блок, то есть:

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 
Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 
Про пчёл.
Пчёлы - отличные создания, они делают мёд.

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Источник

Style display Property

The display property sets or returns the element’s display type.

Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

Tip: If an element is a block element, its display type can also be changed with the float property.

Browser Support

Syntax

Return the display property:

Property Values

Value Description
block Element is rendered as a block-level element
compact Element is rendered as a block-level or inline element. Depends on context
flex Element is rendered as a block-level flex box. New in CSS3
inline Element is rendered as an inline element. This is default
inline-block Element is rendered as a block box inside an inline box
inline-flex Element is rendered as a inline-level flex box. New in CSS3
inline-table Element is rendered as an inline table (like ), with no line break before or after the table
list-item Element is rendered as a list
marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline»)
none Element will not be displayed
run-in Element is rendered as block-level or inline element. Depends on context
table Element is rendered as a block table (like ), with a line break before and after the table)
table-caption Element is rendered as a table caption (like )
table-cell Element is rendered as a table cell (like and )
table-column Element is rendered as a column of cells (like )
table-column-group Element is rendered as a group of one or more columns (like )
table-footer-group Element is rendered as a table footer row (like )
table-header-group Element is rendered as a table header row (like )
table-row Element is rendered as a table row (like
table-row-group Element is rendered as a group of one or more rows (like )
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: inline
Return Value: A String, representing the display type of an element
CSS Version CSS1

More Examples

Example

Difference between the display property and the visibility property:

function demoDisplay() <
document.getElementById(«myP1»).style.display = «none»;
>

function demoVisibility() document.getElementById(«myP2»).style.visibility = «hidden»;
>

Example

Toggle between hiding and showing an element:

function myFunction() <
var x = document.getElementById(‘myDIV’);
if (x.style.display === ‘none’) <
x.style.display = ‘block’;
> else <
x.style.display = ‘none’;
>
>

Example

Difference between «inline», «block» and «none»:

function myFunction(x) <
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById(«mySpan»);
elem.style.display = sel;
>

Example

Return the display type of a

element:

Источник

Читайте также:  Regexp русские буквы java
Оцените статью
© 2024 Программирование