jQuery: width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight()
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
width() và height()
Phương thức width() dùng để thiết lập hoặc trả về độ rộng của phần tử (độ rộng không bao gồm padding, border và margin).
Phương thức height() dùng để thiết lập hoặc trả về độ cao của phần tử (độ cao không bao gồm padding, border và margin).
Dưới đây là ví dụ về hai phương thức này:
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
Ví dụ sau minh hoạ việc trả về độ rộng và độ cao của trang web (HTML document) và cửa số trình duyệt (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 demo việc thiết lập độ rộng và độ cao cho một thẻ <div>:
$("button").click(function(){
$("#div1").width(500).height(500);
});
innerWidth() và innerHeight()
Phương thức innerHeight() trả về độ cao của phần tử, độ cao này bao gồm cả phần padding.
Dưới đây là ví dụ cho hai phương thức này.
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
outerWidth() và outerHeight()
Phương thức outerWidth() trả về độ rộng của phần tử, độ rộng này bao gồm cả phần padding và phần border.
Phương thức outerHeight() trả về độ cao của phần tử, độ cao này bao gồm cả phần padding và phần border.
Dưới đây là ví dụ cho hai phương thức này.
$("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) sẽ trả về độ rộng của phần tử, độ rộng này bao gồm cả phần padding, border và margin.
Phương thức outerHeight(true) trả về độ cao bao gồm cả phần padding, border và margin của phần tử.
Ví dụ:
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});