ابعاد

از موتو کد، دانشنامهٔ برنامه‌نویسی
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

به کمک jQuery، کار با ابعاد پنجره مرورگرها و عنصرها آسان است.[۱]

متدهای ابعاد در jQuery[ویرایش | ویرایش]

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

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

ابعاد در jQuery[ویرایش | ویرایش]

متدهای width() و height() در jQuery[ویرایش | ویرایش]

متد width() عرض یک عنصر را تنظیم می‌کند یا برمی‌گرداند (به استثناء حاشیه داخلی (padding)، کادربندی و حاشیه (margin)).

متد height() ارتفاع یک عنصر را تنظیم می‌کند یا برمی‌گرداند (به استثناء حاشیه داخلی، کادربندی و حاشیه).

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

مثال
$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

متدهای innerWidth() و innerHeight() در jQuery[ویرایش | ویرایش]

متد innerWidth() عرض یک عنصر (شامل حاشیه درونی) را برمی‌گرداند.

متد innerHeight() ارتفاع یک عنصر را (شامل حاشیه درونی) برمی‌گرداند.

مثال زیر ارتفاع / عرض - درونی عنصر <div> مشخص شده را برمی‌گرداند:

مثال
$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

متدهای outerWidth() و outerHeight() در jQuery[ویرایش | ویرایش]

متد outerWidth() عرض یک عنصر را (شامل حاشیه درونی و کادربندی) برمی‌گرداند.

متد outerHeight() ارتفاع یک عنصر را (شامل حاشیه درونی و کادربندی) برمی‌گرداند.

مثال زیر عرض/ ارتفاع - خارجی یک عنصر <div> مشخص شده را برمی‌گرداند:

مثال
$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

متد outerWidth(true) عرض یک عنصر (شامل حاشیه درونی، کادربندی و حاشیه (margin)) را برمی‌گرداند.

متد outerHeight(true) ارتفاع یک عنصر (شامل حاشیه درونی، کادربندی و حاشیه) را برمی‌گرداند.

مثال
$("button").click(function(){
  var txt = "";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

width() و height() بیشتر در jQuery[ویرایش | ویرایش]

مثال زیر عرض و ارتفاع سند (سند HTML) و پنجره (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);
});

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

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

تمرین‌های jQuery[ویرایش | ویرایش]

مرجع jQuery CSS[ویرایش | ویرایش]

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع جی کوئری HTML/CSS مراجعه کنید.


منابع آموزشی[ویرایش]