javascript — !important и display:none и .height() странность
спросил
Изменено 8 лет, 8 месяцев назад
Просмотрено 2к раз
Вчера я обнаружил кое-что странное при работе с фрагментом кода JS. У меня был div , который был скрыт ( display:none ), и я использовал его высоту в некоторых вычислениях в JS. Все это работало нормально, пока я не добавил свой «скрытый» класс (который имеет display:none !important ).
Внезапно высота всегда была 0 . Других изменений, кроме !важно на дисплее не было.
Немного покопавшись, я сузил проблему до чего-то довольно странного:
#b { display:none; } /* указанная высота равна 36 */
#c { display:none !важно; } /* сообщаемая высота равна 0 */
Я создал очень простую JSFiddle, чтобы изолировать это.
Он также использует vanilla JS для получения высоты, которая, похоже, работает нормально / как и ожидалось.
Кажется, что jQuery неправильно сообщает высоту невидимых DIV, и что !important ведет себя правильно.
Это ошибка в jQuery?
- javascript
- jquery
- css
6
Я не думаю, что это ошибка в jQuery, jQuery устанавливает отображение на блок за долю секунды для расчета высоты , когда вы устанавливаете !важно даже это переопределено, вот и все.
Я думаю, нам нужно больше пояснений
В принципе нет способа получить высоту элемента из DOM, если он не имеет никакой высоты. Таким образом, когда отображает нет , высота не существует или ноль .
В jQuery, если отображать равно none , мы можем просто установить display на block на долю секунды, чтобы получить height , во время этого встроенный стиль изменяется, как обычно делается jQuery.
<дел>/дел>
Затем берется высота , но в это время, если вы установили display:none!important в css, этот встроенный стиль не будет работать, и вычисленная высота становится нулевой .
По моему личному мнению, всегда лучше не использовать !important, так как это затрудняет чтение вашего кода/презентации. Css обычно имеет множество способов переопределить стили.
Если вы все еще хотите продолжить, встроенный !important может переопределить ваш стиль и вычислить высоту самостоятельно, используя jQuery show для второго метода, или просто переопределить функцию jQuery для вычисления высоты 🙂
4
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
jQuery CSS — Удалить Добавить показать нет
Нет ответа на этот вопрос.
Будьте первыми, кто откликнется.Ваш ответ
Связанные вопросы в веб-разработке
У меня есть div с этим классом… ПОДРОБНЕЕ
21 июля в веб-разработке по гаурав • 21 740 баллов • 170 просмотров
- jquery
- CSS
document.getElementById(«elementId»).style.display=»нет» используется в JavaScript, чтобы скрыть … ПОДРОБНЕЕ
29 июня в веб-разработке по гаурав • 21 740 баллов • 876 просмотров
- JavaScript
- jquery
- CSS
- производительность
У меня есть элемент, который должен иметь … ПОДРОБНЕЕ
19 августа в веб-разработке по гаурав • 21 740 баллов • 47 просмотров
- jquery
- CSS
display:none означает, что рассматриваемый тег будет …
ответил 14 декабря 2020 г.
в веб-разработке по
Гитика • 65 890 баллов • 98 723 просмотра
- HTML
- CSS
- JavaScript
- узлы
- угловой
<голова> <скрипт> $(документ). готов(функция(){ $(«кнопка»). нажмите (функция () { $(«р»). text(«Добро пожаловать в … ПОДРОБНЕЕ
ответил 27 июня в веб-разработке по раджата • 7 480 баллов • 149Просмотры
- jquery
- HTML
- CSS
Когда вы не уверены, как ваш элемент … ПОДРОБНЕЕ
ответил 27 июня в веб-разработке по раджата • 7 480 баллов • 213 просмотров
- jquery
- твиттер-бутстрап
Привет, jQuery — это быстрый и лаконичный JavaScript … ПОДРОБНЕЕ
ответил 14 февраля 2020 г. в JQuery по картик • 37 510 баллов • 388 просмотров
- HTML
- CSS
- JavaScript
- jquery
- угловой
Привет Картик,
Переменная, объявленная вне функции, имеет .