Приветствую
Вчера провозился весь день. На странице сайта есть заголовок H1 сразу после него вставил JS, определяющий его высоту, но его высота определялась не всегда корректно — чем дальше по структуре в HTML вставлял скрипт, тем чаще он корректно срабатывал (правильно определял высоту), но все равно были случаи неверного срабатывания. Решил попробовать jQuery — поместил файл перед закрывающимся тегом BODY и радовался недолго, обновил страницу несколько раз и все-таки увидел тот же результат — высота не соответствует отображению на экране. Подом добавил $(window).load(...) и попробовал раз сто — все корректно определяет.
Пробовал даже ширину определять, но и она не всегда корректно определяется, даже если заголовок помещен на одной строке.
Решил все заново проверить (разместил скрипт после заголовка). Уменьшил скорость интернета до 10 kb/s и начал всматриваться + добавил функцию window.stop(); сразу после скрипта, на экране все корректно отображается, но ситуация та же самая — высота заголовка в JS / jQuery не всегда соответствует отображаемой на экране.
Попробовал сделать небольшой шаблончик-скелет нужного блока с заголовком вообще без стилей и скриптов. И тогда все корректно высчитывается.
Есть недопонимание того почему так происходит. Вроде, и CSS загрузился + на экране все корректно, но корректно высчитывается высота только внутри $(window).load(...). Может быть, дело в том, что JS / jQuery срабатывают раньше, чем браузер применяет правила стилей к блоку или что-то другое?
Поясните пожалуйста.
Для справки, коды:
spoiler
JavaScript
var myTitle = document.querySelector('.title').offsetHeight;
console.log(myTitle);
jQuery
console.log($('.title').height());
