Định vị trong jQuery

Để làm việc với tọa độ phần tử trong jQuery có các phương thức position và offset.

Các phương thức này dùng để lấy hoặc thay đổi tọa độ hiện tại của phần tử và kết quả trả về là một đối tượng chứa các thuộc tính top và left.

Lỗi tính toán có thể xảy ra nếu người dùng thay đổi kích thước trang. Các phương thức cũng không lấy được tọa độ của các phần tử bị ẩn.

Phương thức offset lấy vị trí phần tử tương đối so với tài liệu, còn position lấy vị trí phần tử tương đối so với lề của phần tử cha.

Giả sử chúng ta có đoạn mã HTML sau:

<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Các đoạn văn được áp dụng kiểu CSS:

#parent {
	width: 150px;
	border: 1px solid blueviolet;
}
#test {
	margin: 5px;
	text-align: center;
	outline: 1px solid green;
}

Hãy lấy vị trí của phần tử div test bằng các phương thức này, và bằng cách truy cập vào các khóa của đối tượng nhận được, hãy hiển thị thông tin này bên dưới trong các đoạn văn:

let offset = $('#test').offset();
$('#text1').text(
	'(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
	'(POSITION()) left: ' + position.left + ', top: ' + position.top
);