Offset jquery là gì

❮ jQuery HTML/CSS Methods

Nội dung chính Show

Definition and Usage
Try it Yourself - Examples
Cách sử dụng offsetWidth và offsetHeight
Một vài điều cần lưu ý
Độ tuơng thích

Example

Return the offset coordinates of a <p> element:

$("button").click(function(){
var x = $("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});

Try it Yourself »

Definition and Usage

The offset() method set or returns the offset coordinates for the selected elements, relative to the document.

When used to return the offset:
This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.

When used to set the offset:
This method sets the offset coordinates of ALL matched elements.

Syntax

Return the offset coordinates:

Set the offset coordinates:

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

Set offset coordinates using a function:

$(selector).offset(function(index,currentoffset))

Parameter

Description

{top:value,left:value}

Required when setting the offset. Specifies the top and left coordinates in pixels.

Possible values:

Name/Value pairs, like {top:100,left:100}
An object with top and left properties (example)

function(index,currentoffset)

Optional. Specifies a function that returns an object containing the top and left coordinates

index - Returns the index position of the element in the set
currentoffset - Returns the current coordinates of the selected element

Try it Yourself - Examples

Set the offset coordinates
How to set the offset coordinates of an element.

Set offset coordinates using a function
Using a function to set the offset coordinates of an element.

Set the offset coordinates for an element using an object
How to set the offset coordinates for an element using a new object.

Set the offset coordinates for an element using the offset coordinates of another element
How to set the offset coords for an element using the offset coords of an existing element.

❮ jQuery HTML/CSS Methods

Đã đăng vào thg 11 24, 2019 5:29 SA 2 phút đọc

Sử dụng offsetWidth and offsetHeight trong JavaScript nói nom na là bạn có thể lấy được kích thước pixel của phần tử HTML. Kích thước được tính bằng cách sử dụng kích thước của nội dung bên trong phần tử HTML bao gôm cả padding, borders, scrollbars nhưng riêng thuộc tính margin thì lại không được offsetWidth và offsetHeight tính toán

Cách sử dụng offsetWidth và offsetHeight

Đơn giản lắm anh em ạ

<div id="foo"> Hello World </div>

Đây là đoạn sử dụng Javascript để lấy giá trị:

const offsetWidth = document.querySelector('#foo').offsetWidth; const offsetHeight = document.querySelector('#foo').offsetHeight;

Bài tập

Dưới đây là 1 ví dụ nho nhỏ, hãy tính tính toán xem giá trị của offsetWidth và offsetHeight là bao nhiêu nhé:

Giả sử element trên là thẻ div có id là foo nhé

fsetWidth = document.querySelector('div#foo').offsetWidth; const offsetHeight = document.querySelector('div#foo').offsetHeight; console.log(offsetWidth, offsetHeight); // --> 255, 140

Nó được tính như thế nào?

Chỉ cần thêm border, padding, scrollbar và nội dung bên trong phần tử HTML (bỏ qua margin!):

Thử một bài tập khác, hãy tính tính toán xem giá trị của offsetWidth và offsetHeight là bao nhiêu nhé:

Kết qủa bài tập này các bạn hãy trả lời bên dưới nhé: VD: BT2: offsetWidth: xxx, offsetHeight: yyy

Và đuơng nhiên sẽ có phần quà nho nhỏ cho những bạn trả lời đúng =))