Є багато влаÑтивоÑтей JavaScript, Ñкі дозволÑÑŽÑ‚ÑŒ нам читати інформацію про ширину, виÑоту елемента та інші геометричні характериÑтики.
Ми чаÑто потребуємо Ñ—Ñ… під Ñ‡Ð°Ñ Ð¿ÐµÑ€ÐµÐ¼Ñ–Ñ‰ÐµÐ½Ð½Ñ Ð°Ð±Ð¾ Ð¿Ð¾Ð·Ð¸Ñ†Ñ–ÑŽÐ²Ð°Ð½Ð½Ñ ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ–Ð² в JavaScript.
Приклад елемента
Як приклад елемента Ð´Ð»Ñ Ð´ÐµÐ¼Ð¾Ð½Ñтрації влаÑтивоÑтей ми викориÑтаємо наведений нижче:
<div id="example">
...ТекÑÑ‚...
</div>
<style>
#example {
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
}
</style>Він має рамки, відÑтупи та прокручуваннÑ. Повний набір функцій. Тут немає зовнішніх відÑтупів (margins), оÑкільки вони не Ñ” чаÑтиною Ñамого елемента, Ñ– Ð´Ð»Ñ Ð½Ð¸Ñ… немає Ñпеціальних влаÑтивоÑтей.
Елемент виглÑдає оÑÑŒ так:
Ви можете відкрити документ у піÑочниці.
Ðа малюнку вище показаний найÑкладніший випадок, коли елемент має Ñмугу прокрутки. ДеÑкі браузери (не вÑÑ–) резервують міÑце Ð´Ð»Ñ Ð½ÑŒÐ¾Ð³Ð¾, беручи його з вміÑту (позначеного вище Ñк “content widthâ€).
Таким чином, без Ñмуги прокрутки ширина вміÑту Ñтановила б 300px, але Ñкщо ширина Ñмуги прокрутки 16px (ширина може відрізнÑтиÑÑ Ð·Ð°Ð»ÐµÐ¶Ð½Ð¾ від приÑтрою та браузера), то залишаєтьÑÑ Ð»Ð¸ÑˆÐµ 300 - 16 = 284px, Ñ– ми повинні це враховувати. ОÑÑŒ чому приклади з цього розділу надані зі Ñмугою прокрутки. Без неї деÑкі розрахунки будуть проÑтіші.
padding-bottom (нижній внутрішній відÑтуп) може бути заповнена текÑтомЗазвичай на наших ілюÑтраціÑÑ… відÑтупи відображаютьÑÑ Ð¿Ð¾Ñ€Ð¾Ð¶Ð½Ñ–Ð¼Ð¸, але Ñкщо в елементі забагато текÑту Ñ– він переповнюєтьÑÑ, то браузери показують “випадаючий†текÑÑ‚ в облаÑÑ‚Ñ– padding-bottom, Ñ– це нормально.
ГеометріÑ
ОÑÑŒ ілюÑÑ‚Ñ€Ð°Ñ†Ñ–Ñ Ð· уÑіма геометричними влаÑтивоÑÑ‚Ñми:
Ð—Ð½Ð°Ñ‡ÐµÐ½Ð½Ñ Ñ†Ð¸Ñ… влаÑтивоÑтей технічно Ñ” чиÑлами, але ці чиÑла Ñ” “пікÑелÑмиâ€, тому це Ð²Ð¸Ð¼Ñ–Ñ€ÑŽÐ²Ð°Ð½Ð½Ñ Ñƒ пікÑелÑÑ….
Почнемо доÑліджувати, починаючи зовні елемента.
offsetParent, offsetLeft/Top
Ці влаÑтивоÑÑ‚Ñ– рідко потрібні, але вÑе ж це “найбільш зовнішні†геометричні влаÑтивоÑÑ‚Ñ–, тому й почнемо з них.
У влаÑтивоÑÑ‚Ñ– offsetParent знаходитьÑÑ Ð¿Ñ€ÐµÐ´Ð¾Ðº елементу, Ñкий браузер викориÑтовує Ð´Ð»Ñ Ð¾Ð±Ñ‡Ð¸ÑÐ»ÐµÐ½Ð½Ñ ÐºÐ¾Ð¾Ñ€Ð´Ð¸Ð½Ð°Ñ‚ під Ñ‡Ð°Ñ Ð²Ñ–Ð·ÑƒÐ°Ð»Ñ–Ð·Ð°Ñ†Ñ–Ñ—.
Тобто найближчий предок, Ñкий задовольнÑÑ” наÑтупним умовам:
- Є CSS-позиціонованим (CSS-влаÑтивіÑÑ‚ÑŒ
positionєabsolute,relative,fixedабоsticky), - або
<td>,<th>,<table>, - або
<body>.
ВлаÑтивоÑÑ‚Ñ– offsetLeft/offsetTop надають координати x/y відноÑно верхнього лівого кута offsetParent.
У наведеному нижче прикладі внутрішній <div> має <main> в ÑкоÑÑ‚Ñ– offsetParent, а влаÑтивоÑÑ‚Ñ– offsetLeft/offsetTop Ñ” зÑувами щодо верхнього лівого кута (180):
<main style="position: relative" id="main">
<article>
<div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
</article>
</main>
<script>
alert(example.offsetParent.id); // main
alert(example.offsetLeft); // 180 (зверніть увагу: чиÑло, а не Ñ€Ñдок "180px")
alert(example.offsetTop); // 180
</script>ІÑнує декілька випадків, коли offsetParent дорівнює null:
- Ð”Ð»Ñ ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ–Ð², що не відображаютьÑÑ (
display:noneабо коли його немає у документі). - Ð”Ð»Ñ ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ–Ð²
<body>та<html>. - Ð”Ð»Ñ ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ–Ð² з
position:fixed.
offsetWidth/Height
Тепер перейдемо до Ñамого елемента.
Ці дві влаÑтивоÑÑ‚Ñ– Ñ” найпроÑтішими. Вони забезпечують “зовнішню†ширину/виÑоту елемента. Ðбо, іншими Ñловами, його повний розмір, включаючи рамки(border).
Ð”Ð»Ñ Ð½Ð°ÑˆÐ¾Ð³Ð¾ елемента:
offsetWidth = 390– Ð·Ð¾Ð²Ð½Ñ–ÑˆÐ½Ñ ÑˆÐ¸Ñ€Ð¸Ð½Ð° блоку, Ñ—Ñ— можна отримати додаваннÑм внутрішньої CSS-ширини (300px), внутрішніх відÑтупів (2 * 20px) та рамок (2 * 25px).offsetHeight = 290– Ð·Ð¾Ð²Ð½Ñ–ÑˆÐ½Ñ Ð²Ð¸Ñота блоку.
Геометричні влаÑтивоÑÑ‚Ñ–, такі Ñк координати та розміри, обчиÑлюютьÑÑ Ð»Ð¸ÑˆÐµ Ð´Ð»Ñ Ð²Ñ–Ð´Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð¸Ñ… елементів.
Якщо елемент (або будь-Ñкий із його предків) має display:none або його немає в документі, тоді вÑÑ– геометричні влаÑтивоÑÑ‚Ñ– дорівнюють нулю (або null Ð´Ð»Ñ offsetParent).
Ðаприклад, offsetParent дорівнює null, а offsetWidth, offsetHeight дорівнюють 0, Ñкщо ми Ñтворили елемент, але ще не вÑтавили його в документ, або він (або його предок) має display:none.
Ми можемо викориÑтати це, щоб перевірити, чи приховано елемент, наприклад:
function isHidden(elem) {
return !elem.offsetWidth && !elem.offsetHeight;
}Зауважимо, що Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ isHidden також поверне true Ð´Ð»Ñ ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ–Ð², Ñкі в принципі показуютьÑÑ, але Ñ—Ñ… розміри дорівнюють нулю (наприклад, порожні <div>).
clientTop/Left
Підемо далі. Ð’Ñередині елемента у Ð½Ð°Ñ Ñ” рамки (border).
Ð”Ð»Ñ Ñ—Ñ… Ð²Ð¸Ð¼Ñ–Ñ€ÑŽÐ²Ð°Ð½Ð½Ñ Ñ–Ñнують геометричні влаÑтивоÑÑ‚Ñ– clientTop та clientLeft.
Ð”Ð»Ñ Ð½Ð°ÑˆÐ¾Ð³Ð¾ елемента:
clientLeft = 25– ширина лівої рамкиclientTop = 25– ширина верхньої рамки
…Ðле Ñкщо бути точним – ці влаÑтивоÑÑ‚Ñ– не ширина/виÑота рамки, а відÑтупи внутрішньої чаÑтини елемента від зовнішньої.
Яка різницÑ?
Вона виникає, коли документ напиÑаний Ñправа наліво (операційна ÑиÑтема арабÑькою або івритом). Тоді Ñмуга прокрутки розташована не праворуч, а ліворуч, а тому clientLeft також включає ширину Ñмуги прокрутки.
У цьому випадку clientLeft буде не 25, бо додаÑÑ‚ÑŒÑÑ ÑˆÐ¸Ñ€Ð¸Ð½Ð° Ñмуги прокрутки: 25 + 16 = 41.
ОÑÑŒ приклад на івриті:
clientWidth/Height
Ці влаÑтивоÑÑ‚Ñ– забезпечують розмір облаÑÑ‚Ñ– вÑередині рамок елемента.
Вони включають ширину вміÑту разом із внутрішніми відÑтупами padding, але без Ñмуги прокрутки:
Ðа зображенні вище давайте Ñпочатку розглÑнемо виÑоту clientHeight.
Ðемає горизонтальної Ñмуги прокрутки, тому це точно Ñума того, що знаходитьÑÑ Ð²Ñередині меж елемента: CSS-виÑота 200px Ð¿Ð»ÑŽÑ Ð²ÐµÑ€Ñ…Ð½Ñ–Ð¹ Ñ– нижній відÑтупи (2 * 20px) загалом 240px.
Тепер clientWidth – ширина вміÑту тут дорівнює не 300px, а 284px, тому що 16px займає Ñмуга прокрутки. Таким чином, Ñума Ñтановить 284px Ð¿Ð»ÑŽÑ Ð²Ñ–Ð´Ñтупи ліворуч Ñ– праворуч, разом 324px.
Якщо немає відÑтупів padding, то clientWidth/Height в точноÑÑ‚Ñ– рівні розміру облаÑÑ‚Ñ– вміÑту вÑередині рамок за вирахуваннÑм Ñмуги Ð¿Ñ€Ð¾ÐºÑ€ÑƒÑ‡ÑƒÐ²Ð°Ð½Ð½Ñ (Ñкщо вона Ñ”).
Тому в тих випадках, коли ми точно знаємо, що відÑтупів немає, можна викориÑтовувати clientWidth/clientHeight Ð´Ð»Ñ Ð¾Ñ‚Ñ€Ð¸Ð¼Ð°Ð½Ð½Ñ Ñ€Ð¾Ð·Ð¼Ñ–Ñ€Ñ–Ð² внутрішньої облаÑÑ‚Ñ– вміÑту.
scrollWidth/Height
Ці влаÑтивоÑÑ‚Ñ– Ñхожі на clientWidth/clientHeight, але вони також включають прокручену (приховану) чаÑтину елемента:
Ðа зображенні вище:
scrollHeight = 723– повна Ð²Ð½ÑƒÑ‚Ñ€Ñ–ÑˆÐ½Ñ Ð²Ð¸Ñота облаÑÑ‚Ñ– вміÑту, включаючи прокручену облаÑÑ‚ÑŒ.scrollWidth = 324– це повна Ð²Ð½ÑƒÑ‚Ñ€Ñ–ÑˆÐ½Ñ ÑˆÐ¸Ñ€Ð¸Ð½Ð°, тут у Ð½Ð°Ñ Ð½ÐµÐ¼Ð°Ñ” горизонтальної прокрутки, тому вона дорівнюєclientWidth.
Ми можемо викориÑтовувати ці влаÑтивоÑÑ‚Ñ–, щоб розширити елемент на вÑÑŽ ширину/виÑоту.
Як тут:
// розгорнути елемент на вÑÑŽ виÑоту вміÑту
element.style.height = `${element.scrollHeight}px`;ÐатиÑніть кнопку, щоб розгорнути елемент:
scrollLeft/scrollTop
ВлаÑтивоÑÑ‚Ñ– scrollLeft/scrollTop це ширина/виÑота прихованої, прокрученої чаÑтини елемента.
Ðа малюнку нижче ми бачимо scrollHeight та scrollTop Ð´Ð»Ñ Ð±Ð»Ð¾ÐºÑƒ з вертикальною прокруткою.
Іншими Ñловами, scrollTop означає “Ñкільки прокручено вгоруâ€.
scrollLeft/scrollTop можна змінюватиБільшіÑÑ‚ÑŒ геометричних влаÑтивоÑтей тут доÑтупні лише Ð´Ð»Ñ Ñ‡Ð¸Ñ‚Ð°Ð½Ð½Ñ, але scrollLeft/scrollTop можна змінювати, Ñ– браузер прокрутить елемент відповідно до змін.
Якщо клацнути на елемент нижче, буде виконано код elem.scrollTop += 10. Це змуÑить вміÑÑ‚ елемента прокрутитиÑÑ Ð½Ð° 10px вниз.
Ðа мене
1
2
3
4
5
6
7
8
9
Ð’ÑÑ‚Ð°Ð½Ð¾Ð²Ð»ÐµÐ½Ð½Ñ scrollTop на 0 або навпаки велике значеннÑ, наприклад 1e9 змуÑить елемент прокрутитиÑÑ Ð´Ð¾ Ñамого верху/низу відповідно.
Ðе варто брати ширину/виÑоту з CSS
Ми щойно розглÑнули геометричні влаÑтивоÑÑ‚Ñ– елементів DOM, Ñкі можна викориÑтовувати Ð´Ð»Ñ Ð¾Ñ‚Ñ€Ð¸Ð¼Ð°Ð½Ð½Ñ ÑˆÐ¸Ñ€Ð¸Ð½Ð¸, виÑоти та обчиÑÐ»ÐµÐ½Ð½Ñ Ð²Ñ–Ð´Ñтані.
Ðле, Ñк ми знаємо з розділу Стилі та клаÑи, ми можемо зчитати CSS виÑоту та ширину за допомогою getComputedStyle.
То чому б не прочитати ширину елемента за допомогою getComputedStyle, оÑÑŒ так?
let elem = document.body;
alert( getComputedStyle(elem).width ); // показує CSS-ширину elemЧому ми повинні заміÑÑ‚ÑŒ цього викориÑтовувати геометричні влаÑтивоÑÑ‚Ñ–? Є дві причини:
-
По-перше, CSS
width/heightзалежить від іншої влаÑтивоÑÑ‚Ñ–:box-sizingÑка визначає “що таке†ширина та виÑота CSS. Виходить, що змінаbox-sizing, наприклад, Ð´Ð»Ñ Ð·Ñ€ÑƒÑ‡Ð½Ñ–ÑˆÐ¾Ñ— верÑтки, зламає такий JavaScript. -
По-друге, CSS
width/heightможе бутиauto, наприклад Ð´Ð»Ñ Ð²Ð±ÑƒÐ´Ð¾Ð²Ð°Ð½Ð¾Ð³Ð¾ елемента:<span id="elem">Привіт!</span> <script> alert( getComputedStyle(elem).width ); // auto </script>ЗвіÑно, з точки зору CSS,
width:autoÑ” абÑолютно нормальним, але в JavaScript нам потрібен точний розмір уpxÑкий ми можемо викориÑтовувати Ð´Ð»Ñ Ð¾Ð±Ñ‡Ð¸Ñлень. Виходить, що в цьому випадку ширина CSS взагалі безкориÑна.
І Ñ” ще одна причина: Ñмуга прокрутки. Іноді код, Ñкий добре працює без Ñмуги прокрутки, починає працювати з помилками, оÑкільки Ñмуга прокрутки займає проÑÑ‚Ñ–Ñ€ у вміÑÑ‚Ñ– в деÑких браузерах. Отже, реальна ширина, доÑтупна Ð´Ð»Ñ Ð²Ð¼Ñ–Ñту, менша за ширину CSS. І clientWidth/clientHeight враховують це.
…Ðле з getComputedStyle(elem).width ÑÐ¸Ñ‚ÑƒÐ°Ñ†Ñ–Ñ Ñ–Ð½ÑˆÐ°. ДеÑкі браузери (наприклад, Chrome) повертають реальну внутрішню ширину без Ñмуги прокрутки, а деÑкі з них (наприклад, Firefox) – CSS ширину (ігнорує прокрутку). Такі між браузерні відмінноÑÑ‚Ñ– Ñ” причиною не викориÑтовувати getComputedStyle, а радше покладатиÑÑ Ð½Ð° геометричні влаÑтивоÑÑ‚Ñ–.
Якщо ваш браузер резервує проÑÑ‚Ñ–Ñ€ Ð´Ð»Ñ Ñмуги прокрутки (більшіÑÑ‚ÑŒ браузерів Ð´Ð»Ñ Windows це роблÑÑ‚ÑŒ), ви можете перевірити це нижче.
Елемент із текÑтом має CSS width:300px.
Ðа комп’ютері в ОС Windows, Firefox, Chrome, Edge резервуєтьÑÑ Ð¼Ñ–Ñце Ð´Ð»Ñ Ñмуги прокрутки. Ðле Firefox показує 300px, а Chrome Ñ– Edge – менше. Це тому, що Firefox повертає ширину CSS, а інші браузери повертають “реальну†ширину.
Зверніть увагу, що опиÑана Ñ€Ñ–Ð·Ð½Ð¸Ñ†Ñ ÑтоÑуєтьÑÑ Ð»Ð¸ÑˆÐµ Ñ‡Ð¸Ñ‚Ð°Ð½Ð½Ñ getComputedStyle(...).width з JavaScript, візуально вÑе правильно.
ПідÑумки
Елементи мають наÑтупні геометричні влаÑтивоÑÑ‚Ñ–:
offsetParent– це найближчий CSS-позиціонований предок або найближчийtd,th,table,body.offsetLeft/offsetTop– координати відноÑно лівого верхнього кутуoffsetParent.offsetWidth/offsetHeight– “зовнішнцширина/виÑота елемента, включаючи рамки.clientLeft/clientTop– відÑтані від верхнього лівого зовнішнього кута до верхнього лівого внутрішнього (вміÑÑ‚ + відÑтуп) кута. Ð”Ð»Ñ ÐžÐ¡, орієнтованої зліва направо, це завжди ширина лівої/верхньої рамки. Ð”Ð»Ñ ÐžÐ¡, орієнтованої Ñправа наліво, вертикальна Ñмуга прокрутки розташована ліворуч, томуclientLeftтакож включає Ñ—Ñ— ширину.clientWidth/clientHeight– ширина/виÑота вміÑту, включаючи відÑтупи, але без Ñмуги прокрутки.scrollWidth/scrollHeight– ширина/виÑота вміÑту, Ñк Ñ–clientWidth/clientHeight, але також включає прокручену невидиму чаÑтину елемента.scrollLeft/scrollTop– ширина/виÑота прокрученої верхньої чаÑтини елемента, починаючи з його верхнього лівого кута.
УÑÑ– влаÑтивоÑÑ‚Ñ– доÑтупні лише Ð´Ð»Ñ Ñ‡Ð¸Ñ‚Ð°Ð½Ð½Ñ, за винÑтком scrollLeft/scrollTop Ñкі змушують браузер прокручувати елемент у разі зміни.
Коментарі
<code>, Ð´Ð»Ñ ÐºÑ–Ð»ÑŒÐºÐ¾Ñ… Ñ€Ñдків – обгорніть Ñ—Ñ… тегом<pre>, Ð´Ð»Ñ Ð¿Ð¾Ð½Ð°Ð´ 10 Ñ€Ñдків – викориÑтовуйте піÑочницю (plnkr, jsbin, codepen…)