jQuery có một số phương thức quan trọng để làm việc với kích thước (dimensions):
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
Phương thức width()
đặt hoặc trả về chiều rộng của phần tử (không gồm padding, border và margin).
Phương thức height()
đặt hoặc trả về chiều cao của phần tử (không gồm padding, border và margin).
Ví dụ sau trả về chiều rộng và chiều cao của phần tử <div>
:
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Phương thức innerWidth()
trả về chiều rộng của một phần tử (bao gồm padding).
Phương thức innerHeight()
trả về chiều cao của một phần tử (bao gồm padding).
Ví dụ sau trả về inner-width/height của phần tử <div>
:
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Phương thức outerWidth()
trả về chiều rộng của một phần tử (bao gồm padding và border).
Phương thức outerHeight()
trả về chiều cao của một phần tử (ibao gồm padding và border).
Ví dụ sau trả về outer-width/height của phần tử <div>
:
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Phương thức outerWidth(true)
trả về chiều rộng của một phần tử (bao gồm padding, border, và margin).
Phương thức outerHeight(true)
trả về chiều cao của một phần tử (bao gồm padding, border, và margin).
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
Ví dụ sau trả về chiều rộng và chiều cao của tài liệu HTML và window (the browser viewport):
$("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 set chiều rộng và chiều cao của phần tử <div>
:
$("button").click(function(){
$("#div1").width(500).height(500);
});
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website