Phương thức offset

Phương thức offset cho phép lấy vị trí của phần tử so với tài liệu, khác với phương thức position, lấy tọa độ so với lề của phần tử cha. Phương thức offset hữu ích hơn trong việc định vị một phần tử mới phía trên một phần tử hiện có cho các thao tác toàn cục, ví dụ, để triển khai kéo và thả (drag-and-drop). Kết quả của nó, phương thức trả về một đối tượng, chứa các thuộc tính top và left. Lỗi trong tính toán có thể xảy ra nếu người dùng thay đổi kích thước trang. Phương thức cũng không lấy được tọa độ của các phần tử bị ẩn.

Cú pháp

Lấy tọa độ hiện tại. Trong một số trường hợp giá trị lấy được có thể là số thập phân:

$(bộ chọn).offset();

Để thay đổi tọa độ của phần tử, cần truyền một đối tượng, chứa các thuộc tính top và left:

$(bộ chọn).offset({top: 40, left: 40});

Chúng ta cũng có thể áp dụng một hàm được chỉ định cho mỗi phần tử trong tập hợp. Khi đó tham số đầu tiên hàm nhận được là số thứ tự của phần tử trong tập hợp, còn tham số thứ hai là đối tượng chứa tọa độ top và left. this bên trong hàm sẽ trỏ đến phần tử hiện tại. Giá trị tọa độ của phần tử sẽ thay đổi thành những giá trị mà hàm trả về:

$(bộ chọn).width(function(số thứ tự trong tập hợp, {tọa độ hiện tại}));

Ví dụ

Hãy lấy vị trí của div (hình vuông màu xanh lá), bằng phương thức offset, sau đó, truy cập vào các khóa của đối tượng nhận được, xuất thông tin này:

<div id="result">bấm vào hình vuông ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Ví dụ

Hãy thay đổi tọa độ của đoạn văn thứ hai:

<p style="margin-left: 10px;">văn bản 1</p>
<p style="margin-left: 10px;">văn bản 2</p>

$('p').last().offset({top: 40, left: 60});

Xem thêm

phương thức position,
cho phép lấy tọa độ hiện tại của phần tử
phương thức offsetParent,
cho phép lấy phần tử tổ tiên được định vị gần nhất của phần tử
phương thức css,
cho phép lấy và thay đổi kiểu CSS của phần tử