Web Cơ Bản

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

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

- Phương thức offset() được dùng để:

  • Lấy vị trí của phần tử được chọn so với vị trí của phần tử gốc trong trang web.
  • Hoặc thiết lập lại vị trí của phần tử phần tử được chọn.

2) Cách sử dụng phương thức offset() trong jQuery

- Đối với phương thức offset(), ta có ba trường hợp sử dụng tương ứng với ba loại cú pháp:

2.1) Lấy vị trí của phần tử được chọn

- Dưới đây là cú pháp dùng để lấy vị trí của phần tử được chọn:

$(selector).offset();

- Với cú pháp này, giá trị trả về sẽ là một đối tượng chứa hai thuộc tính:

  • Thuộc tính "top" cho biết khoảng cách từ cạnh trên của phần tử gốc đến phần tử được chọn.
  • Thuộc tính "left" cho biết khoảng cách từ cạnh trái của phần tử gốc đến phần tử được chọn.

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức offset() chỉ trả về đối tượng chứa thông tin vị trí của phần tử trùng khớp được tìm thấy đầu tiên.

2.2) Thiết lập lại vị trí của phần tử được chọn

- Dưới đây là cú pháp dùng để thiết lập lại vị trí của phần tử được chọn:

- Lưu ý: Cú pháp này thường được dùng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp duy nhất, hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập cùng một vị trí.

$(selector).offset({top:value,left:value});

2.3) Thiết lập lại vị trí của phần tử được chọn (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại vị trí của phần tử được chọn bằng cách sử dụng hàm:

- Lưu ý: Cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một vị trí riêng.

$(selector).offset(function(index,currentoffset){
    return newOffset;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

function(index,currentoffset){
    return newOffset;
}

- Chỉ định hàm trả về một đối tượng lưu trữ vị trí mà bạn muốn thiết lập cho các phần tử được chọn.

- Trong đó:

  • Tham số "index" trả về chỉ số của phần tử được chọn trong danh sách các phần tử trùng khớp được tìm thấy.
  • Tham số "currentoffset" trả về đối tượng lưu trữ vị trí hiện tại của phần tử được chọn.
  • "newOffset" là đối tượng lưu trữ vị trí mà bạn muốn thiết lập cho phần tử được chọn.

3) Một số ví dụ

Ví dụ:

- Hiển thị vị trí của phần tử <div>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            var obj = $("div").offset();
            $("#s1").text(obj.top + "px");
            $("#s2").text(obj.left + "px");
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập lại vị trí của phần tử <p>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").offset({top:100,left:300});
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập lại vị trí cho các phần tử <p> (tùy trường hợp)


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").offset(function(n,c){
                if(n==0){
                   var obj = new Object();
                   bj.top = c.top;
                   obj.left = c.left;
                   return obj;
                }
                if(n==1){
                   var obj = new Object();
                   obj.top = c.top;
                   obj.left = c.left + 150;
                   return obj;
                }
                if(n==2){
                   var obj = new Object();
                   obj.top = 300;
                   obj.left = 300;
                   return obj;
                }
            });
        });
    });
</script>
Xem ví dụ

4) Điểm giống và khác giữa offset() & position()

- Dưới đây là bảng mô tả điểm giống và khác giữa phương thức offset() và position():

offset() position
Điểm giống - Cả hai phương thức này đều có thể dùng để lấy vị trí của phần tử được chọn so với vị trí của phần tử gốc trong trang web.
Điểm khác - Vị trí của phần tử bị thay đổi bởi phần margin (Xem ví dụ) - Vị trí của phần tử không bị thay đổi bởi phần margin (Xem ví dụ)
- Có hỗ trợ thiết lập lại vị trí của phần tử. - Không hỗ trợ thiết lập lại vị trí của phần tử.