Jquery Size Methods

06/10/2019

Bài sau » « Bài trước

Với Jquery, thì việc tính toán, kiểm tra kích thước của các phần tử HTML khá dễ dàng. Một số phương thức làm việc với kích thước như sau:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jquery size - phương thức kích thước trong jquery

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

Phương thức width() dùng để thiết lập hoặc trả về width của một phần tử HTML (ngoại trừ padding, border, margin).

Phương thức height() dùng để thiết lập hoặc trả về height của một phần tử HTML (ngoại trừ padding, border, margin).

Ví dụ: Khi ta muốn lấy kích thước width và height của phần tử có class="demo" thì ta viết như sau:

var width = $('.demo').width(); var height = $('.demo').height(); alert('Chiều rộng là : '+ width + ' - Chiều cao là: '+ height);

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

Phương thức innerWidth() dùng để trả về width của một phần tử HTML bao gồm padding (ngoại trừ border, margin).

Phương thức innerHeight() dùng để trả về height của một phần tử HTML bao gồm padding (ngoại trừ border, margin).

Ví dụ: Khi ta muốn lấy kích thước width và height của phần tử có class="demo" bao gồm cả padding của nó thì ta viết như sau:

var width = $('.demo').innerWidth(); var height = $('.demo').innerHeight(); alert('Chiều rộng có padding là : '+ width + ' - Chiều cao có padding là: '+ height);

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

Phương thức outerWidth() dùng để trả về width của một phần tử HTML bao gồm padding, border (ngoại trừ margin).

Phương thức outerHeight() dùng để trả về height của một phần tử HTML bao gồm padding, border (ngoại trừ margin).

Ví dụ: Khi ta muốn lấy kích thước width và height của phần tử có class="demo" bao gồm cả padding, border của nó thì ta viết như sau:

var width = $('.demo').outerWidth(); var height = $('.demo').outerHeight(); alert('Chiều rộng có padding và border là : '+ width + ' - Chiều cao có padding và border là: '+ height);

Tuy nhiên, 2 phương thức trên ta truyền thêm tham số true vào thì giá trị trả về sẽ bao gồm cả margin.

var width = $('.demo').outerWidth(true); var height = $('.demo').outerHeight(true); alert('Chiều rộng có padding, border và margin là : '+ width + ' - Chiều cao có padding, border và margin là: '+ height);

Các phương thức tính width() và height() khác

Ngoài ra, ta còn có thể trả về width và height của trang web (HTML Document) và window ( browser viewport):

// Tính width và height của trang web var width_document = $(document).width(); var height_document = $(document).height(); // Tính width và height của browser var width_browser = $(window).width(); var height_browser = $(window).height();

Để thiết lập width và height cho thẻ HTML chỉ định ta chỉ cần truyền tham số vào cho nó, xem ví dụ bên dưới:

$("button").click(function(){ $("#demo").width(500).height(300); // Thiết lập width 500px, height 300px });

Bài sau » « Bài trước
Back to top