Trong bài viết trước chúng ta đã tìm hiểu về postition() trong jQuery để xác định vị trí của phần tử. Hôm nay bạn sẽ được biết một phương thức gần giống như vậy đó là offset() trong jQuery.
Sau đây mình sẽ hướng dẫn bạn cách sử dụng .offset() jQuery, cách sử dụng cũng như sự khác biệt với postion().
Phương thức offset() truy xuất vị trí hiện tại liên quan đến tài liệu. Nó khác biệt với postion, với postion() truy xuất vị trí hiện tại của một phần tử liên quan đến phần tử mẹ.
Cú pháp:
jQuery(selector).offset();
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
jQuery(document).ready(function(){
jQuery("#b2").click(function(){
var y = jQuery("h1").offset();
document.getElementById("output").innerHTML = "Top = " + y.top + " Left = " + y.left;
});
});
</script>
</head>
<body>
<h1> Phần tử xác định vị trí </h1>
<button id="b2">Offset</button>
<p id="output"></p>
</body>
</html>
Bạn thấy jQuery offset như thế nào? Chắc chắn rằng nó sẽ khá hữu ích khi xây dựng một chức năng nào đó cho trang web của bạn đấy. Hãy lưu lại và thực hành để ghi nhớ phương thức này nhé.
