Bài jQuery 19: Các Dimension trong jQuery

0
260

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn các Dimension trong jQuery.

 Thế nào là Dimension trong jQuery?

jQuery cung cấp một số phương thức, chẳng hạn như height(), InternalHeight(), outsHeight(), width(), InternalWidth()outsWidth () để lấy và đặt kích thước CSS cho các phần tử.

Phương thức width() và height()

Các phương thức jQuery width()height() lấy hoặc đặt chiều rộng và chiều cao cho phần tử tương ứng. Chiều rộng và chiều cao này không bao gồm phần padding, bordermargin trên phần tử. Ví dụ sau sẽ trả về chiều rộng và chiều cao của phần tử <div>.

Tương tự, bạn có thể đặt chiều rộng và chiều cao của phần tử bằng cách đưa giá trị làm tham số trong phương thức width()height(). Giá trị có thể là một chuỗi (số và đơn vị, ví dụ: 100px, 20em, v.v.) hoặc một số. Ví dụ sau sẽ đặt chiều rộng của phần tử <div> thành 400 pixel và chiều cao thành 300 pixel.

Phương thức innerWidth() và innerHeight()

Các phương thức jQuery InternalWidth()InternalHeight() lấy hoặc đặt chiều rộng bên trong và chiều cao bên trong của phần tử tương ứng. Chiều rộng và chiều cao bên trong này bao gồm phần padding nhưng không bao gồm border và margin của phần tử. Ví dụ sau sẽ trả về chiều rộng và chiều cao bên trong của phần tử <div> khi nhấp vào nút.

Tương tự, bạn có thể đặt chiều rộng và chiều cao bên trong của phần tử bằng cách chuyển giá trị dưới dạng tham số trong phương thức InternalWidth()InternalHeight(). Các phương thức này chỉ thay đổi chiều rộng hoặc chiều cao của vùng nội dung của phần tử để khớ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 và tổng của phần padding bên trái và bên phải bằng 50 pixel so với chiều rộng mới của phần tử, sau khi đặt chiều rộng bên trong thành 400 pixel là 350 pixel, tức là New Width = Inside Chiều rộng – Đệm ngang. Tương tự, bạn có thể ước tính thay đổi chiều cao trong khi đặt chiều cao bên trong.

Phương thức outerWidth() và outerHeight()

Các phương thức jQuery outsWidth()outsHeight() lấy hoặc đặt chiều rộng bên ngoài và chiều cao bên ngoài của phần tử tương ứng. Chiều rộng và chiều cao bên ngoài này bao gồm phần paddingborder nhưng không bao gồm margin của phần tử. Ví dụ sau sẽ trả về chiều rộng và chiều cao bên ngoài của phần tử <div> khi nhấp vào nút.

Bạn cũng có thể có được chiều rộng và chiều cao bên ngoài bao gồm phần paddingborder cũng như margin của phần tử. Đối với điều đó chỉ cần xác định tham số đúng cho các phương thức chiều rộng bên ngoài, như outsWidth(true)outsHeight(true).

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn Các Dimension trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Traversing trong jQuery.

Chúc các bạn học tập tốt! 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây