Buzz
Điều chỉnh kích thước phần tử với jQuery
Sau khi đã tìm hiểu về phương thức stop() trong jQuery, bài học tiếp theo của Mytour sẽ giới thiệu các phương thức mới về việc đặt kích thước cho phần tử trong thư viện jQuery.
1. Điều chỉnh kích thước phần tử trong jQuery
Thư viện jQuery cung cấp nhiều phương thức như height(), innerHeight(), outerHeight(), width(), innerWidth(), và outerWidth() để trích xuất và đặt kích thước cho các phần tử.
2. Sử dụng phương thức width() và height() trong jQuery
Các phương thức width() và height() trong jQuery được sử dụng để lấy hoặc đặt kích thước chiều rộng và chiều cao của phần tử tương ứng. Kích thước này không tính padding, đường viền, và lề trên phần tử.
Ví dụ: Ví dụ sau sẽ hiển thị kích thước chiều rộng và chiều cao của phần tử div:
Kết quả xuất ra sẽ có dạng như sau:
Tương tự, có thể đặt chiều rộng và chiều cao của phần tử bằng cách sử dụng giá trị như là tham số trong phương thức width() và height(). Giá trị có thể là chuỗi (bao gồm số và đơn vị, chẳng hạn như 100px, 20em, ...) hoặc một số.
Ví dụ: Trong ví dụ dưới đây, chiều rộng của phần tử div được thiết lập là 400 pixel và chiều cao là 300 pixel:
Kết quả xuất ra sẽ có dạng như sau:
Lưu ý: Để tính toán chiều rộng hoặc chiều cao của phần tử, sử dụng phương thức width() hoặc height() trong jQuery vì chúng trả về giá trị không có đơn vị pixel (ví dụ: 400, 500, ...). Ngược lại, phương thức như css('width') hoặc css('height') trả về giá trị có đơn vị là pixel (ví dụ: 500px, ...).
3. Sử dụng innerWidth() và innerHeight() trong jQuery
Phương thức innerWidth() và innerHeight() trong jQuery được sử dụng để lấy hoặc thiết lập chiều rộng hoặc chiều cao của phần tử. Kích thước này bao gồm cả padding nhưng không bao gồm đường viền và căn lề trên phần tử.
Ví dụ: Ví dụ sau đây sẽ trả về kích thước chiều rộng và chiều cao của phần tử div khi nhấp chọn nút:
Kết quả xuất ra sẽ có dạng như sau:
Tương tự, có thể đặt chiều rộng và chiều cao của phần tử bằng cách sử dụng giá trị làm tham số cho phương thức innerWidth() và innerHeight(). Những phương thức này chỉ thay đổi kích thước của vùng chứa nội dung của phần tử để phù hợp với giá trị đã chỉ định.
Ví dụ: Nếu chiều rộng hiện tại của phần tử là 300 pixel, tổng padding trái và padding phải là 50 pixel so với chiều rộng mới của phần tử sau khi thiết lập giá trị chiều rộng của phần tử thành 400 pixel, chiều rộng mới sẽ là 350 pixel, tức là New Width = Inner Width - Horizontal Padding. Cũng có thể ước tính chiều cao thay đổi khi thiết lập chiều cao của phần tử.
Kết quả xuất ra sẽ có dạng như sau:
4. Sử dụng outerWidth() và outerHeight() trong jQuery
Sử dụng outerWidth() và outerHeight() trong jQuery để lấy hoặc thiết lập giá trị chiều rộng và chiều cao của phần tử, bao gồm cả padding và đường viền (border) và không tính căn lề trên phần tử.
Ví dụ: Trong ví dụ dưới đây, kết quả trả về giá trị chiều rộng và chiều cao của phần tử div khi click chọn nút:
Kết quả xuất ra sẽ có dạng như sau:
Hơn nữa, có khả năng trích xuất giá trị chiều rộng và chiều cao của phần tử, bao gồm cả padding và đường viền, cũng như căn lề của phần tử. Điều này thực hiện bằng cách chỉ định tham số true cho các phương thức outerWidth(true) và outerHeight(true).
Kết quả đầu ra có dạng như sau:
Tương tự, chúng ta có khả năng đặt giá trị chiều rộng và chiều cao của phần tử bằng cách sử dụng giá trị làm tham số cho các phương thức outerWidth() và outerHeight(). Những phương thức này chỉ điều chỉnh giá trị chiều rộng hoặc chiều cao của vùng chứa nội dung của phần tử để khớp với giá trị đã chỉ định, tương tự như các phương thức innerWidth() và innerHeight().
Ví dụ: Nếu chiều rộng hiện tại của phần tử là 300 pixel và tổng padding bên trái + padding bên phải là 50 pixel, tổng chiều rộng của đường viền bên trái + đường viền bên phải là 20 pixel so với giá trị chiều rộng mới của phần tử sau khi đặt thành 400 pixel là 330 pixel, tức là New Width = Outer Width - (Horizontal Padding + Horizontal Border). Tương tự, chúng ta cũng có thể ước tính sự thay đổi chiều cao của phần tử khi thiết lập outer height.
Kết quả xuất ra sẽ có dạng như sau:
Trong bài học này, Mytour đã chia sẻ những phương thức thú vị để đặt kích thước cho phần tử trong jQuery. Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi nào, như cách chèn nội dung vào tài liệu HTML bằng jQuery, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.
