ابعاد عناصر (Dimensions)
در jQuery کار با ابعاد عناصر (Dimensions) یعنی طول و عرض خیلی راحت است. مثل وقتی که می خواهی بدانی یک کارت روی میز چقدر جا می گیرد، اینجا هم می فهمی هر باکس در صفحه چقدر فضا گرفته است.
متدهای مهم ابعاد عناصر در jQuery
برای کار با ابعاد عناصر در jQuery چند متد اصلی داریم. این متدها به تو عرض و ارتفاع را با حالت های مختلف می دهند؛ با یا بدون padding، border و margin.
- width() و height(): ابعاد خالص بدون padding و border و margin.
- innerWidth() و innerHeight(): همراه padding اما بدون border و margin.
- outerWidth() و outerHeight(): همراه padding و border و گاهی margin.
نکته: وقتی از ابعاد عناصر در jQuery حرف می زنیم، منظورمان فقط یک عدد نیست؛ منظور این است که کدام بخش جعبه CSS را حساب می کنیم.
width() و height(): عرض و ارتفاع خالص
متدهای width() و height() در jQuery عرض و ارتفاع خالص عنصر را برمی گردانند. یعنی فقط خود محتوا را حساب می کنند و padding و border و margin را کنار می گذارند.
در مثال زیر، وقتی روی دکمه کلیک می کنی، عرض و ارتفاع #div1 درون خودش نمایش داده می شود.
$("button").click(function() {
var txt = "";
txt += "Width: " + $("#div1").width() + "<br/>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
نکته: اگر width() یا height() را بدون پارامتر صدا بزنی، مقدار فعلی را برمی گرداند؛ اگر عدد بدهی، مقدار جدید را تنظیم می کند.
innerWidth() و innerHeight(): همراه padding
وقتی innerWidth() و innerHeight() را در jQuery صدا می زنی، علاوه بر محتوا، padding هم حساب می شود. انگار حاشیه نرم داخل جعبه را هم در نظر می گیری.
در این مثال، عرض و ارتفاع داخلی #div1 همراه padding نشان داده می شود.
$("button").click(function() {
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "<br/>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
هشدار: اگر در محاسبه چیدمان (Layout) دقیق هستی، همیشه بدان کدام متد padding را حساب می کند و کدام نه.
outerWidth() و outerHeight(): همراه border
متدهای outerWidth() و outerHeight() در jQuery علاوه بر محتوا و padding، border را هم در نظر می گیرند. یعنی اندازه «پوسته سخت» جعبه را حساب می کنی.
در این مثال، عرض و ارتفاع بیرونی #div1 همراه padding و border محاسبه می شود.
$("button").click(function() {
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "<br/>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
اگر outerWidth(true) و outerHeight(true) بنویسی، margin هم اضافه می شود. این یعنی کل فضایی که عنصر روی صفحه اشغال کرده است.
$("button").click(function() {
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "<br/>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
نکته: برای طراحی گریدهای دقیق، outerWidth(true) خیلی کمک می کند؛ چون فاصله بین باکس ها را هم در نظر می گیرد.
ابعاد سند و پنجره مرورگر
گاهی می خواهی بدانی خود صفحه کامل (document) یا فقط بخش قابل دیدن مرورگر (window) چقدر بزرگ است. این اطلاعات برای طراحی صفحات ریسپانسیو خیلی مهم است.
در مثال زیر، با کلیک روی دکمه، ابعاد document و window در یک alert نمایش داده می شود.
$("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);
});
نکته: document اندازه کل صفحه است؛ window فقط همان چیزی است که کاربر الان می بیند.
تعیین ابعاد عناصر (Dimensions) با width() و height()
متدهای width() و height() فقط برای خواندن نیستند؛ می توانی با آن ها ابعاد عناصر در jQuery را تنظیم هم بکنی. مثلا یک مربّع 500 در 500 پیکسلی بسازی.
در مثال زیر، با کلیک روی دکمه، اندازه #div1 به 500 پیکسل در 500 پیکسل تنظیم می شود.
$("button").click(function() {
$("#div1").width(500);
$("#div1").height(500);
});
هشدار: اگر واحد را در CSS بر پایه درصد گذاشته ای، تغییر مستقیم به پیکسل ممکن است چیدمان کلی را به هم بزند.
گام های تمرینی برای کار با ابعاد عناصر (Dimensions)
- یک <div> بساز و به آن id="div1" بده.
- با CSS برای #div1 padding، border و margin مشخص کن.
- کدی بنویس که با width() و height() ابعاد خالص #div1 را داخل خودش نشان دهد.
- کد را عوض کن و این بار از innerWidth() و innerHeight() استفاده کن.
- در مرحله بعد outerWidth(true) و outerHeight(true) را امتحان کن تا فرق کامل را ببینی.
ارتباط ابعاد عناصر با CSS و چیدمان صفحه
ابعاد عناصر در jQuery معمولا کنار استایل ها استفاده می شود. مثلا می توانی در کنار متد css() (css()) همزمان رنگ و اندازه یک باکس را تنظیم کنی. همچنین بخش کلاس های CSS (CSS Classes) به تو کمک می کند کلاس هایی بسازی که ابعاد استاندارد دارند.
برای مرور سریع خود این صفحه هم می توانی دوباره روی لینک ابعاد عناصر در jQuery کلیک کنی و مثال ها را نگاه کنی.
جمع بندی سریع
- width() و height() ابعاد خالص بدون padding و border را می دهند.
- innerWidth() و innerHeight() padding را هم حساب می کنند.
- outerWidth() و outerHeight() همراه padding و border و گاهی margin هستند.
- می توانی ابعاد document و window را هم با jQuery اندازه بگیری.
- برای کنترل دقیق چیدمان، ابعاد عناصر در jQuery ابزار مهمی است.