Phương thức offset() trong jQuery

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> 

position-jquery1

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é.

Related Posts

Cấu trúc dữ liệu và giải thuật: Một cái nhìn tổng quan

Giới thiệu Trong lĩnh vực phát triển phần mềm, cấu trúc dữ liệu và giải thuật là hai khái niệm quan trọng không thể thiếu. Cấu trúc…

Next.js – Khám phá Framework JavaScript tuyệt vời cho phát triển ứng dụng web

Giới thiệu về Next.js Next.js là một framework JavaScript mã nguồn mở và phổ biến được sử dụng để xây dựng các ứng dụng web hiệu suất…

Lisp – Cái nhìn tổng quan về ngôn ngữ lập trình đặc biệt

Lisp là gì? Lisp là một ngôn ngữ lập trình đặc biệt mang đến một cách tiếp cận độc đáo trong việc xử lý thông tin và…

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

Bài tập về hàm split trong Python

Chuỗi là một loại dữ liệu phổ biến trong lập trình, và việc xử lý chuỗi là một kỹ năng cần thiết cho các lập trình viên….

Xử lý chuỗi trong Python: Các phương thức cơ bản

Python là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Nó được sử dụng rộng rãi trong nhiều lĩnh vực, từ phát triển…