Почему Javascript выдает неточные размеры элементов?

Question

[Давид Ломидзе]

Здравствуйте,
Есть адаптивно-резиновый сайт и если я пытаюсь получить ширину или высоту элемента который не имеет фиксированные размеры, то функция выдает значении на 10-15 пикселей меньше чем элемент является на самом деле (в тот момент).

$(document).ready(function () {
   var elementHeight = $(".element").height();
   alert(elementHeight);
});

Но если эту функцию положить в $(window).resize(); и слегка (на 1 пиксель) изменить размер окна браузера чтобы это функция выполнилась в таком случае функция выдает точный размер..

$(document).ready(function () {
   $(window).resize(function () {
      var elementHeight = $(".element").height();
      alert(elementHeight);
   });
});

Comments

[Alexey ZloDeeV]

Попробуй .outerHeight()

[Давид Ломидзе]

Alexey ZloDeeV: Выдает те же значение. Только при $(window).resize(); работает корректно :(

Answer 1

[Сергей]

Возможно, в момент document.ready не успевают загрузиться какие-то элементы (шрифты), которые влияют на размер контента. Попробуй использовать window.load.

Comments

[Давид Ломидзе]

Да вы правы шрифты не успевают загружаться. window.load помогает, большое спасибо за совет.

Answer 2

[xmeoff]

Скорее всего, после вашего кода есть подключение других скриптов, которые изменяют содержимое документа или размеры элементов. Если они тоже обернуты в $(document).ready либо его аналог, то они будут вызываться после вашего кода. Из-за этого и меняются размеры вашего элемента. В принципе даже код счетчиков способен изменить структуру документа (рядом с собой).
Переместите ваш код в конец страницы, либо вызывайте его через setTimeout с нулевым интервалом.