jQuery Change CSS display Property to none or block

Как изменить CSS-свойство display на none или block с помощью jQuery

Вы можете использовать jQuery-метод css() , чтобы изменить значение свойства CSS display на none, block или любое другое значение. Метод css() применяет правила стиля непосредственно к элементам, то есть к встроенным.

Следующий пример изменит отображение элемента DIV при нажатии кнопки:

     #myDiv   Display none Display block 
#myDiv
  

В качестве альтернативы, если вы беспокоитесь о начальном значении свойства display элемента, но хотите переключаться между его начальным значением и none, вы можете просто использовать jQuery-метод show() , hide() или просто toggle() . В следующем примере показано, как это работает:

     #myDiv   Hide Show Toggle 
#myDiv
  

Читайте также

Похожие примеры:

Источник

Все значения свойства 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: Источник Оцените статью Вам также может понравиться Ящики с усами python pandas.plotting.boxplot# Make a box-and-whisker plot Пример использования свойства CSS table-layout. table-layout¶ Свойство table-layout определяет, как Пример использования свойства CSS table-layout. HTML Размеры таблицы HTML таблицы могут иметь разные Пример использования свойства CSS table-layout. table-layout¶ Свойство table-layout определяет, как Правообладателям Политика конфиденциальности Контакты