მეთოდი getBoundingClientRect

მეთოდი getBoundingClientRect შეიცავს ელემენტის კოორდინატების ობიექტს. კოორდინატები გამოითვლება გვერდის ხილული ნაწილის მიმართ, გადახვევის გათვალისწინების გარეშე (ფანჯრის მიმართ). ანუ როგორც position თვისების fixed მნიშვნელობის შემთხვევაში.

დაბრუნებულ ობიექტში შედის თვისებები: left, top, right, bottom, width, height. აღსანიშნავია, რომ ამ თვისებებს არაფერი აქვთ საერთო CSS თვისებებთან. მათში შედის ელემენტის შესაბამის მხარეებამდე მანძილი. left/right - მარცხენა საზღვრიდან გვერდის ხილული ფართობის, ხოლო top/bottom - ზედა საზღვრიდან.

სინტაქსი

ელემენტი.getBoundingClientRect();

მაგალითი

მივიღოთ ელემენტის კოორდინატები:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

იხილეთ აგრეთვე

თვისება offsetParent,
რომელიც შეიცავს პოზიციონირებული მშობელს
თვისება offsetTop,
რომელიც შეიცავს ელემენტის ზედა ნაწილიდან წანაცვლებას
თვისება offsetLeft,
რომელიც შეიცავს ელემენტის მარცხენა ნაწილიდან წანაცვლებას
მეთოდი elementFromPoint,
რომელიც აბრუნებს ელემენტს კოორდინატების მიხედვით