Kích thước của jQuery

Bằng jQuery, việc xử lý kích thước của phần tử và cửa sổ trình duyệt rất dễ dàng.

Phương thức kích thước của jQuery

jQuery cung cấp nhiều phương thức quan trọng để xử lý kích thước:

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

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

Phương thức width() thiết lập hoặc trả về chiều rộng của phần tử (không bao gồm lề trong, viền hoặc lề ngoài).

Phương thức height() thiết lập hoặc trả về chiều cao của phần tử (không bao gồm lề trong, viền hoặc lề ngoài).

Ví dụ sau đây trả về chiều rộng và chiều cao của phần tử <div> được chỉ định:

Mô hình

$("button").click(function(){
  var txt="";
  txt += "Chiều rộng: " + $("#div1").width() + "</br>";
  txt += "Chiều cao: " + $("#div1").height();
  $("#div1").html(txt);
});

Thử nghiệm trực tiếp

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

Phương thức innerWidth() trả về chiều rộng của phần tử (bao gồm lề trong).

Phương thức innerHeight() trả về chiều cao của phần tử (bao gồm lề trong).

Ví dụ sau đây trả về inner-width/height của phần tử <div> được chỉ định:

Mô hình

$("button").click(function(){
  var txt="";
  txt += "Chiều rộng nội bộ: " + $("#div1").innerWidth() + "</br>";
  txt += "Chiều cao nội bộ: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Thử nghiệm trực tiếp

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

Phương thức outerWidth() trả về chiều rộng của phần tử (bao gồm viền trong và viền).

Phương thức outerHeight() trả về chiều cao của phần tử (bao gồm viền trong và viền).

Dưới đây là ví dụ để trả về outer-width/height của phần tử <div> được chỉ định:

Mô hình

$("button").click(function(){
  var txt="";
  txt+= "Chiều rộng ngoài: " + $("#div1").outerWidth() + "</br>";
  txt+= "Chiều cao ngoài: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

Thử nghiệm trực tiếp

Phương thức outerWidth(true) trả về chiều rộng của phần tử (bao gồm viền trong, viền và margen).

Phương thức outerHeight(true) trả về chiều cao của phần tử (bao gồm viền trong, viền và margen).

Mô hình

$("button").click(function(){
  var txt="";
  txt+= "Chiều rộng ngoài (+margen): " + $("#div1").outerWidth(true) + "</br>";
  txt+= "Chiều cao ngoài (+margen): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Thử nghiệm trực tiếp

jQuery - Nhiều width() và height() hơn

Dưới đây là ví dụ để trả về chiều rộng và chiều cao của tài liệu (tài liệu HTML) và cửa sổ (viewport của trình duyệt):

Mô hình

$("button").click(function(){
  var txt="";
  txt+= "Chiều rộng/chiều cao tài liệu: " + $(document).width();
  txt+= "x" + $(document).height() + "\n";
  txt+= "Chiều rộng/chiều cao cửa sổ: " + $(window).width();
  txt+= "x" + $(window).height();
  alert(txt);
});

Thử nghiệm trực tiếp

Dưới đây là ví dụ để thiết lập chiều rộng và chiều cao của phần tử <div> được chỉ định:

Mô hình

$("button").click(function(){
  $("#div1").width(500).height(500);
});

Thử nghiệm trực tiếp

Hướng dẫn jQuery CSS

Nếu bạn cần tài liệu tham khảo đầy đủ về jQuery Dimensions, hãy truy cập vào cuốn hướng dẫn jQuery尺寸 của chúng tôi.