0

Как получить позицию скрытого через display:none элемента?

Пример:

console.log('Left: '+ $(".row").offset().left);
.row {
  display: none;
  margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">Text</div>

2
  • 1
    Показываете элемент, берёте его позицию, скрываете элемент
    – Regent
    24 окт 2018 в 11:14
  • @Regent, хорошее решение, возьму на заметку
    – Bert
    24 окт 2018 в 11:28

1 ответ 1

0

Дело в том, что когда вы применяете 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.