Дело в том, что когда вы применяете display:none
к элементу, браузер перестает беспокоиться о его рендеринге, поэтому вы не можете получить доступ к интересующим вам параметрам (что возможно при visibility: hidden
), но здесь есть одна уловка, если вы примените visibility: hidden
, затем покажете элемент через display: block
(то есть элемент также невидим, но при этом браузер его отрендрил), получите нужные вам данные и вернете все назад.
Пример получения параметров скрытого через display: none
элемента :
//копируем текущие стили в переменную
var previousCss = $(".row").attr("style");
//скрываем элемент через visibility:hidden. даем браузеру сделать рендер
//через dipslay:block
$(".row")
.css({
visibility: 'hidden',
display: 'block'
});
//Получаем нужные параметры
let height = $(".row").height();
let width = $(".row").width();
let leftOffset = $(".row").offset().left;
let topOffset = $(".row").offset().top;
console.log('heigth: ' + height);
console.log('width: ' + width);
console.log('leftOffset: ' + leftOffset);
console.log('topOffset: ' + topOffset);
//Применяем начальные стили обратно
$(".row").attr("style", previousCss ? previousCss : "");
div.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">Text</div>