- 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ử
Ví dụ:
- Thiết lập lại vị trí của phần tử
$[document].ready[function[]{ $["button"].click[function[]{ $["p"].offset[{top:100,left:300}]; }]; }]; Xem ví dụVí dụ:
- Thiết lập lại vị trí cho các phần tử
[tùy trường hợp]
$[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; } }]; }]; }]; 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[]:
- Trang chủ
- Tham khảo
- jQuery
- jQuery - function
- .offset[]
- .offset[]: Lấy tọa độ hiện tại của thành phần đầu tiên, hoặc thiết lập các tọa độ của từng thành phần trong tập hợp các thành phần phù hợp liên quan đến văn bản.
Tiêu đề $[function[]{ var offset = $['div'].offset[]; $['span'].text[offset.left+" , "+offset.top]; }];
Tọa độ của thành phần div: []
Cách sử dụng $['div'].offset[] ta đã lấy được giá trị tọa độ của thành phần div.
Trước khi có jQuerySau khi có jQueryTọa độ của thành phần div: []
Tọa độ của thành phần div: [0 , 52]
Tiêu đề p { background-color: pink; } div { background-color: yellow; } $[function[]{ $['div'].offset[{top: 80, left: 300 }]; }];
Tag p
Tọa độ của thành phần div hiện giờ đã được thay đổi, tương đương đoạn sytle sau: position: relative; top: 80px; left: 300px;.
Trước khi có jQuerySau khi có jQueryTag p
Tag p
Tiêu đề p { background-color: blue; } $[function[]{ $['button'].on['click', function[] { $['p'].offset[function[index, coordinates]{ if [index == 0] {//Chỉ tác động lên thành phần đầu tiên coordinates.top += 10; coordinates.left += 10; } return $[this].offset[coordinates]; }]; }]; }];
Tag p 01
Tag p 02
Khi click vào button, ta đã cộng thêm vào 10px của tọa độ x và y
Trước khi có jQuerySau khi có jQueryTag p 01
Tag p 02
Click
Tag p 01
Tag p 02
Click
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 ạ
Hello WorldĐâ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];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 =]]
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.