ابعاد در jQuery

با jQuery به راحتی می توان با ابعاد عناصر و پنجره مرورگر کار کرد.

متدهای ابعاد در jQuery

jQuery متد های مهمی برای کار با ابعاد دارد:
()width
()height
()innerWidth
()innerHeight
()outerWidth
()outerHeight

متد های  ()width و ()height

متد ()width عرض یک عنصر را تنظیم یا برمیگرداند(بدون احتساب padding،border و margin).
متد ()height ارتفاع یک عنصر را تنظیم یا برمیگرداند(بدون احتساب padding،border و margin).
مثال زیر عرض وارتفاع <div>  خاصی را برمیگرداند:
مثال :

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "
";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
}); 

متد های ()innerWidth و ()innerHeight

متد ()innerWidth عرض یک عنصر را با احتساب padding برمیگرداند.
متد ()innerheight ارتفاع یک عنصر را با احتساب padding برمیگرداند.
مثال زیر عرض و ارتفاع عنصر <div> خاصی را برمیگرداند:
مثال :

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "
";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
}); 

متدهای ()outerWidth و ()outerHeight

متد ()outerWidth عرض یک عنصر را با احتساب padding و border برمیگرداند.
متد ()Outerheight ارتفاع یک عنصر را با احتساب padding و border برمیگرداند.
مثال زیر ارتفاع و عرض یک <div> مشخص را برمیگرداند:
مثال :

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "
";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
}); 

متد outerWidth(true) عرض یک عنصر را با احتساب padding،border و  margin برمیگرداند.
متد outerHeight(true) ارتفاع  یک عنصر را با احتساب padding،border و  margin برمیگرداند.
مثال :

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "
";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
}); 

کارایی بیشتر  ()width و ()height

مثال زیر  عرض و ارتفاع فایل (فایل html) و پنجره (مرورگر) را برمیگرداند:
مثال :

$("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);
}); 

مثال زیر ارتفاع و عرض عنصر <div> مشخص شده را تنظیم می کند:
مثال :

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