Содержание
Я пытаюсь добавить переключатель галочки, который скрывает и показывает элементы списка, изменяя атрибут отображения стиля от "none" до "inline", но он не работает. Я устанавливаю стиль атрибута "display: none" в файле CSS. Затем я установил его в "display: inline" в javascript, когда кто-то проверяет коробку. Javascript успешно меняет свойство element на inline, но по какой-то причине элемент остается невидимым.
Если я делаю обратное, установив отображение в строку в CSS и переопределив его никому в javascript, он отлично работает. Я не понимаю, почему это будет работать в одном направлении, но не в другом.
Я использую хром. Вот код. Любые отзывы приветствуются.
JAVASCRIPT (из командной строки или смены флажка)
UPDATE: Я знаю, что я могу просто переместить "display: none" из css и установить его на загрузку страницы с помощью javascript. Но если я это сделаю, он будет скрывать их после загрузки страницы, а это значит, что на более медленных компьютерах пользователь может увидеть, как они мгновенно закроются в видимости. Вот почему я использую css для установки начального состояния, а затем пытаюсь переопределить его, когда флажок установлен или снят.
ОБНОВЛЕНИЕ 2: Позвольте мне подчеркнуть, что если я задаю элемент видимым в css, а затем спрячу его при замене флажка, этот код работает нормально. Но если элемент изначально установлен на невидимый в css, флажок не может сделать элемент видимым. Таким образом, это проблема, когда css "display: none" не может быть переопределен после загрузки страницы, но css "display: inline" может.
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Значение block
- Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
- Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию:
Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
- Элементы располагаются на той же строке, последовательно.
- Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства width/height .
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
С точки зрения современного CSS, обычные
| и т.д. – это просто элементы с предопределёнными значениями display : |
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
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
is used in JavaScript to hide an element. But in jQuery,
is used for the same purpose. Which way is more efficient? I have seen a comparison between two jQuery function .hide() and .css("display","none") here.
But my problem is whether pure JavaScript is more efficient than jQuery?
4 Answers 4
Talking about efficiency:
What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn’t matter here.
Efficiency isn’t going to matter for something like this in 99.999999% of situations. Do whatever is easier to read and or maintain.
In my apps I usually rely on classes to provide hiding and showing, for example .addClass(‘isHidden’)/.removeClass(‘isHidden’) which would allow me to animate things with CSS3 if I wanted to. It provides more flexibility.