Page 121 - 6108

– їх ім'я нечутливе до регістру (адже це HTML);
– видно в innerHTML.
3.4.5 Розміри і позиція елементів

Елементи мають ряд властивостей, які дозволяють визначити розмір
елемента. Але важливо розуміти різницю між усіма цими властивостями.
Властивості offsetWidth і offsetHeight визначають відповідно
ширину і висоту елемента в пікселях. В ширину і висоту включається межа
елемента.

Властивості clientWidth і clientHeight також визначають ширину і
висоту елемента в пікселях, але вже без урахування кордону:
#rect {
width: 100px;
height: 100px;
background: #50c878;
border: 3px solid silver;
}
<div id="rect"></div>
let rect = document.getElementById("rect");
console.log("offsetHeight: " + rect.offsetHeight);
console.log("offsetWidth: " + rect.offsetWidth);
console.log("clientHeight: " + rect.clientHeight);
console.log("clientWidth: " + rect.clientWidth);

Власивість offsetParent містить посилання на батьківський елемент в
сенсі відображення на сторінці.
Властивості offsetLeft / Top задають зсув щодо offsetParent.
Властивості clientTop/Left задають розмір границі (товщина рамки)
Координати в вікні
Для того, щоб помістити один елемент поруч з іншим на сторінці, а також
рухати його довільним чином, наприклад, поруч з покажчиком миші -
використовуються координати.
Координатна система щодо вікна браузера починається в лівому-
верхньому кутку поточної видимої області вікна. Координати в ній clientX /
clientY.
Метод elem.getBoundingClientRect() повертає координати елемента,
під якими розуміються розміри «уявного прямокутника», який охоплює весь
елемент.
Координати повертаються у вигляді об'єкта з властивостями:
– top – Y-координата верхньої межі елемента,
– left – X-координата лівого краю,
– right – X-координата правої межі,
– bottom – Y-координата нижньої межі.
– x – Х-координата верхнього лівого кута;

– y – Y-координата верхнього лівого кута;

let rect = document.getElementById("rect");
let coor = rect.getBoundingClientRect();