Привет друзья, очередная небольшая заметка, в которой я постараюсь максимально разобрать тему определения ширины и высоты окон и элементов с помощью 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? Легко!
На в от уже из предыдущего примера, мы можем делать даже какую-то адаптацию и анимацию, все зависит от того что нужно сделать. Немного даже включил фантазию для того чтобы получился превосходный пример.
Да, не скажу что все сильно меняется и т.п. но думаю пример очень даже понятен. В нем я просто проверяю текущий размер, а после уже выдаю ту информацию которую считаю нужной, то есть если дисплей очень большой, то выдаем соответствующее сообщение.
Ну и наоборот если маленький, то мы знаем, что это так — в принципе как я и писал, что проще не бывает.
Если я был полезен этим постом, то не забудь поделиться этой статьей в своей социальной сети — так ты мне поможешь хоть-как то продвинуть этот проект, а в свою очередь смогу продолжить печатать полезные посты которые пригодятся на любой случай жизни.