Определяем высоту и ширину окон и элементов с помощью JavaScript

Привет друзья, очередная небольшая заметка, в которой я постараюсь максимально разобрать тему определения ширины и высоты окон и элементов с помощью javascript.

Вся загвоздка в том, что бывают ситуации когда нужно определить размер определенного элемента, который в свою очередь может быть динамическим, либо в зависимости от размера экрана делать определенные действия.

В общем в своей работе с этой темой я натыкался очень часто, потому как-то хочется разобрать эту тему с целью помощи мне подобным.

Ниже ты найдешь как минимум три очень интересных примера, которые могут пригодиться тебе в реальной разработке, а уже их тебе конечно же придется переделать под себя — ничего сложного в коде ты точно не найдешь!

Определяем ширину и высоту элемента

Делаем простейший блок, в котором я просто выводу какие-то данные — но дальше мы с помощью JavaScript определяем размеры блока, пока-что предлагаю к рассмотрению отличный пример, а ниже разберу код — возможно кому-то пригодится.

Итак поехали…

Самые внимательные заметили, что я не только выдаю размер блока, но и пытаюсь ловить его размер динамически во время того как пользователь как-то увеличивает или уменьшает ширину своего окна.

Естественно чтобы мне же было проще основной код я вставляю в функцию:

go();

function go(){
  // наш код
}

Ну выше или ниже, это без разницы мы проводим инициализацию самого кода, для того чтобы исполнить его. Но, кроме того мы еще и добавляем лиснер, который перезапускает нашу функцию при событии изменения размера экрана, этот код выглядит следующим образом:

window.addEventListener('resize', go);

Дальше сам код, он прост до немогу:

 document.querySelector('.width').innerText = document.querySelector('.typical-block').offsetWidth;
document.querySelector('.height').innerText = document.querySelector('.typical-block').offsetHeight;

Две строчки. в которой я определяю элемент на который выводу информацию, а сама информация определяет размер основного блока .typical-block.

Определяем высоту и ширину экрана

Из предыдущего кода фактически ничего не изменилось, причем вообще изменились лишь две строки, о них я расскажу после примера:

Итак, думаю тут более интересно, ведь мы определяем размер самого экрана. Бывают случаи когда необходимо определить размер для того, чтобы сделать адаптив под себя, либо например перекинуть картинку из одного div в другой.

Вся фишка в этих двух строчках:

document.querySelector('.width').innerText = document.documentElement.clientWidth;
document.querySelector('.height').innerText = document.documentElement.clientHeight;

В них мы вызываем document, который содержит весь DOM документ, далее мы вызываем documentElement, он создан только для чтения, и изменить в нем ничего не получится, но это и не нужно.

Не нужно потому, что он хранит в себе тонну важной информации, среди которой находится информация о текущем размере экрана пользователя.

Ну а дальше стандартно выводим нужную нам информацию на экран.

Адаптивная верстка с помощью Javascript? Легко!

На в от уже из предыдущего примера, мы можем делать даже какую-то адаптацию и анимацию, все зависит от того что нужно сделать. Немного даже включил фантазию для того чтобы получился превосходный пример.

Да, не скажу что все сильно меняется и т.п. но думаю пример очень даже понятен. В нем я просто проверяю текущий размер, а после уже выдаю ту информацию которую считаю нужной, то есть если дисплей очень большой, то выдаем соответствующее сообщение. 

Ну и наоборот если маленький, то мы знаем, что это так — в принципе как я и писал, что проще не бывает.

Если я был полезен этим постом, то не забудь поделиться этой статьей в своей социальной сети — так ты мне поможешь хоть-как то продвинуть этот проект, а в свою очередь смогу продолжить печатать полезные посты которые пригодятся на любой случай жизни.