Браузерный JavaScript: размеры и координаты DOM-элементов

✏️ We'll explore various DOM element size metrics: offsetWidth / offsetHeight, clientLeft / clientTop, clientWidth / clientHeight, scrollWidth / scrollHeight, and scrollLeft / scrollTop. We'll also explore browser coordinate systems: relative to the window and relative to the entire page, and learn how to use the getBoundingClientRect method to determine an element's coordinates in these different coordinate systems. 🔴 Timeline: ▶ 00:00​ | Introduction ▶ 00:27​ | Element Sizes ▶ 01:09​ | Full Element Sizes: offsetWidth and offsetHeight ▶ 02:19​ | Element Border Sizes: clientLeft and clientTop ▶ 04:42​ | Element dimensions excluding border and scrollbar — clientWidth and clientHeight ▶ 05:50​ | Element dimensions including scrollable area — scrollWidth and scrollHeight ▶ 06:40​ | Dimensions of the invisible scrolled area of ​​an element — scrollLeft and scrollTop ▶ 06:57​ | Scrolling element contents — the scroll method ▶ 08:54​ | Problems with computed width and height values ​​via getComputedStyle ▶ 11:10​ | Browser coordinate systems ▶ 11:26​ | Coordinates relative to the window — the getBoundingClientRect method ▶ 13:30​ | Coordinates relative to the entire page — the window.scrollX and window.scrollY properties ▶ 14:59​ | Conclusion 📚 Video links: ➖ JavaScript documentation from MDN: https://developer.mozilla.org/ru/docs... ➖ Russian-language JavaScript reference Doka: https://doka.guide/js/ ➖ Fundamental online JavaScript tutorial: https://learn.javascript.ru/ 💬 Telegram community chat (help for beginners): https://t.me/FriendlyFrontend 🧑‍💻 Main Telegram channel: https://t.me/AleksanderLamkov ❤️ Boosty (support the author): https://boosty.to/friendly-frontend 🗂️ Free courses on the channel: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Layout Masterclass for Beginners:    • Адаптивная верстка сайта с нуля для начина...   🔘 Advanced Layout Workshop (BEM, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Layout Workshop with JavaScript Practice:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Layout Workshop on JSX, SCSS, JS, Vite, Minista (SSG), and BEM: https://stepik.org/a/228315 📌 Author: ➖ Personal Website: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksand... ➖ Stepik (paid courses and workshops): https://stepik.org/a/228315 #frontend #frontend #js #javascript