Offsetwidth là gì
- 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. Show 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 đó:
3) Một số ví dụVí dụ: - Hiển thị vị trí của phần tử Xem ví dụ
Ví dụ: - Thiết lập lại vị trí của phần tử Ví dụ: - Thiết lập lại vị trí cho các phần tử (tùy trường hợp) 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ử.
Tọa độ của thành phần div: () Tag 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: () Tag div Tọa độ của thành phần div: (0 , 52) Tag div
Tag p Tag div 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 div Tag p Tag div
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 Tag p 01 Tag p 02 Tag p 01 Tag p 02 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ậpDướ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é 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íchoffsetWidth 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. |