❮ jQuery HTML/CSS Methods
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))
{top:value,left:value} | Required when setting the offset. Specifies the top and left coordinates in pixels. Possible values:
|
function(index,currentoffset) | Optional. Specifies a function that returns an object containing the top and left coordinates
|
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, 140Nó đượ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 =))
Một vài điều cần lưu ý
Block-level: offsetWith và offsetHeight không làm việc với những thẻ HTML inline như là span, em, a nó sẽ mặc định là 0px
Rounded Values: Các giá trị được làm tròn đến số nguyên gần nhất. Nếu bạn cần các giá trị chính xác hơn, hãy sử dụng getBoundingoffsetRect()
Read-Only: Bạn có thể chỉ định một giá trị mới để thay đổi kích thước của phần tử HTML. Ví dụ someElement.offsetWidth = 30
Độ tuơng thích
offsetWidth and offsetHeight được hỗ trợ trên tất cả các trình duyệt máy tính để bàn và thiết bị di động.
All rights reserved