jQuery - Kích thước
Với jQuery, thật dễ dàng làm việc với các kích thước của phần tử và cửa sổ trình duyệt.
Phương thức thứ nguyên jQuery
jQuery có một số phương thức quan trọng để làm việc với các thứ nguyên:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Kích thước jQuery
Phương thức jQuery width () và height ()
Phương width()thức đặt hoặc trả về chiều rộng của một phần tử (không bao gồm phần đệm, đường viền và lề).
Phương height()thức đặt hoặc trả về chiều cao của một phần tử (không bao gồm phần đệm, đường viền và lề).
Ví dụ sau trả về chiều rộng và chiều cao của một <div>
phần tử được chỉ định:
Thí dụ
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Phương thức jQuery innerWidth () và innerHeight ()
Phương innerWidth()thức trả về chiều rộng của một phần tử (bao gồm phần đệm).
Phương innerHeight()thức trả về chiều cao của một phần tử (bao gồm phần đệm).
Ví dụ sau trả về chiều rộng / chiều cao bên trong của một <div>
phần tử được chỉ định:
Thí dụ
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Phương thức jQuery externalWidth () và externalHeight ()
Phương outerWidth()thức trả về chiều rộng của một phần tử (bao gồm phần đệm và đường viền).
Phương outerHeight()thức trả về chiều cao của một phần tử (bao gồm phần đệm và đường viền).
Ví dụ sau trả về chiều rộng / chiều cao bên ngoài của một <div>
phần tử được chỉ định:
Thí dụ
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Phương outerWidth(true)thức này trả về chiều rộng của một phần tử (bao gồm phần đệm, đường viền và lề).
Phương outerHeight(true)thức trả về chiều cao của một phần tử (bao gồm phần đệm, đường viền và lề).
Thí dụ
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Thêm chiều rộng () và chiều cao ()
Ví dụ sau 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ổ (chế độ xem của trình duyệt):
Thí dụ
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
Ví dụ sau đặt chiều rộng và chiều cao của một <div>
phần tử được chỉ định:
Thí dụ
$("button").click(function(){
$("#div1").width(500).height(500);
});
Bài tập jQuery
Tham chiếu CSS jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức CSS jQuery, vui lòng truy cập Tham chiếu HTML / CSS jQuery của chúng tôi .