! important and display: none и .height() странность

Вчера я обнаружил что-то странное, когда работал с куском JS-кода. У меня был div, который был скрыт (display:none), и я использовал его высоту в некоторых вычислениях в JS. Все это работало нормально, пока я не добавил свой "скрытый" класс (который имеет display:none !important).

Вдруг высота всегда была 0. На дисплее не было никаких изменений, кроме !important.

После некоторого рытья я сузил проблему до того, что я нахожу довольно странным:

#b { display:none; }            /* reported height is 36 */
#c { display:none !important; } /* reported height is 0  */

Я создал очень простой JSFiddle, чтобы изолировать это. Он также использует vanilla JS для получения высоты, которая, кажется, работает просто отлично/как ожидалось.

Кажется, что jQuery неправильно сообщает высоту о невидимых DIV и что !important ведет себя правильно.

Является ли это ошибкой в jQuery?

Ответ 1

Я не думаю, что это ошибка в jQuery, jQuery устанавливает display в block для части секунды для вычисления height, когда вы устанавливаете !important даже это ovverriden, вот и все.

Я думаю, нам нужно еще несколько объяснений

В принципе нет возможности получить height элемента из DOM, если он не имеет высоты. Поэтому, когда display none, height не существует или zero.

В jQuery, если display - none, мы можем просто установить display на block на долю секунды, чтобы получить height, в течение этого стиля inline изменяется, как обычно делается JQuery.

<div id="something" style="display:block">/div>

И затем выполняется height, но в это время, если вы установили display:none!important в css, этот встроенный стиль не будет работать, а height рассчитывается как zero.

По моему личному мнению, его всегда лучше не использовать! важно, так как это делает ваш код/презентацию трудным для чтения. Css обычно имеет множество способов переопределить стили.

Если вы все еще хотите продолжить, встроенный !important может переопределить ваш стиль и рассчитать высоту самостоятельно, используя шоу jQuery для второго метода или просто переопределить функцию jQuery для вычисления высоты:)