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

Display none div with javascript

Содержание
  1. Using JavaScript to Show and Hide a Div
  2. Using JavaScript to Show/Hide a Div With a Click
  3. Все значения свойства display
  4. Значение none
  5. Значение block
  6. Значение inline
  7. Значение inline-block
  8. Значения table-*
  9. Вертикальное центрирование с table-cell
  10. Значения list-item, run-in и flex
  11. Style display Property
  12. Browser Support
  13. Syntax
  14. Property Values
  15. Technical Details
  16. More Examples
  17. Example
  18. Example
  19. Example
  20. Example
  21. Скрыть / показать элементы JavaScript
  22. Используйте свойство style.visibility , чтобы скрыть / показать элементы HTML
  23. Используйте свойство style.display , чтобы скрыть / показать элементы HTML
  24. Используйте jQuery hide() / show() , чтобы скрыть / показать элементы HTML

Using JavaScript to Show and Hide a Div

We can use JavaScript to show and hide a div using one button by combing the getElementById() method, the display property, and an if else conditional statement.

var displayStatus = document.getElementById("someDiv"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else

We can use JavaScript to show a div and hide a div, but to be able to toggle between the two, we can do so using the code above.

Let’s say we have the following html:

If we want to use JavaScript to show hide the div, we can do so by targeting the element’s display property. We do this simply by getting the id of the div and then changing its display property to “block” if it is hidden, or “none” if it is shown. We check this with an if-else conditional statement.

var displayStatus = document.getElementById("div1"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else

Note that we can also show/hide (or toggle) a div easily using jQuery with the toggle() method.

Using JavaScript to Show/Hide a Div With a Click

We can use JavaScript to show/hide a div very easily by combining the display property and an if-else conditional statement with an onclick event.

Читайте также:  Load obj file python

Let’s say that we have the following HTML where we want to give the user the ability to show and hide the div #div1. The div will just be a greenish box that will be shown to start.

In the JavaScript code, we will add an onclick event to a button that will run a function we will create. In the function, we will simply change the display property of the div to “block” if it is hidden, or “none” if it is shown.

Here is the JavaScript code:

The final code and output for this example of using JavaScript to show/hide a div with a click is below:

Источник

Все значения свойства 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:

Источник

Скрыть / показать элементы JavaScript

Скрыть / показать элементы JavaScript

  1. Используйте свойство style.visibility , чтобы скрыть / показать элементы HTML
  2. Используйте свойство style.display , чтобы скрыть / показать элементы HTML
  3. Используйте jQuery hide() / show() , чтобы скрыть / показать элементы HTML
  4. Используйте jQuery toggle() , чтобы скрыть / показать элементы HTML
  5. Используйте addClass() / removeClass() , чтобы скрыть / показать элементы HTML

Мы часто сталкиваемся с ситуациями, когда мы хотим переключиться между отображением и скрытием элемента. В этом руководстве рассказывается, как скрыть / отобразить элемент в JavaScript.

Используйте свойство style.visibility , чтобы скрыть / показать элементы HTML

Свойство style.visibility , когда установлено значение hidden, делает целевой элемент скрытым, но не удаляет его из потока. Итак, целевой элемент отображается, но не отображается. Это не влияет на планировку и позволяет другим элементам занимать свое естественное пространство. Мы можем снова сделать целевой элемент видимым, вернув для свойства значение visible .

document.getElementById(id).style.visibility = "visible"; // show  document.getElementById(id).style.visibility = "hidden"; // hide

Используйте свойство style.display , чтобы скрыть / показать элементы HTML

Свойство style.display , когда установлено в none , удаляет целевой элемент из обычного потока страницы и позволяет остальным элементам занимать его пространство. Хотя целевой элемент не отображается на странице, мы все равно можем взаимодействовать с ним через DOM. Затрагиваются все потомки, и они не отображаются так же, как родительский элемент. Мы можем снова сделать целевой элемент видимым, установив для свойства значение block . Желательно установить display как » , потому что block добавляет поле к элементу.

document.getElementById(id).style.display = 'none'; // hide  document.getElementById(id).style.display = ''; // show

Используйте jQuery hide() / show() , чтобы скрыть / показать элементы HTML

  1. Скорость : определяет скорость задержки эффекта затухания.
  2. Замедление : определяет функцию замедления, используемую для перехода в видимое / скрытое состояние. Принимает два разных значения: свинг и линейный .
  3. Обратный вызов : это функция, выполняемая после завершения выполнения метода show() .

Точно так же метод jQuery hide() помогает скрыть выбранные элементы. Принимает те же 3 параметра, что и show() .

Источник

Оцените статью
© 2024 Программирование