سبد (0)

تبلیغات

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

در jQuery، کار با ابعاد بسیار آسان است.


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

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

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

ابعاد در jQuery

jQuery Dimensions


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

متد ()width، برای تنظیم یا برگرداندن مقدار خصوصیت width استفاده می شود. (شامل padding و border و margin نمی شود)

متد ()height، برای تنظیم یا برگرداندن مقدار خصوصیت height استفاده می شود. (شامل padding و border و margin نمی شود)

در مثال زیر، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود:

مثال (متدهای کار با ابعاد در jQuery)

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});
خودتان امتحان کنید »

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

متد ()innerWidth، برای برگرداندن مقدار خصوصیت width استفاده می شود. (شامل padding می شود اما border و margin در نظر گرفته نمی شود)

متد ()innerHeight، برای برگرداندن مقدار خصوصیت height استفاده می شود. (شامل padding می شود اما border و margin در نظر گرفته نمی شود)

در مثال زیر، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding نیز هست:

مثال (متدهای کار با ابعاد در jQuery)

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});
خودتان امتحان کنید »

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

متد ()outerWidth، برای برگرداندن مقدار خصوصیت width استفاده می شود. (شامل padding و border می شود اما margin در نظر گرفته نمی شود)

متد ()outerHeight، برای برگرداندن مقدار خصوصیت height استفاده می شود. (شامل padding و border می شود اما margin در نظر گرفته نمی شود)

در مثال زیر، مقدار خصوصیت های width و height عنصر با شناسه "div1" نمایش داده می شود، این مقدار شامل اندازه padding و border نیز هست:

مثال (متدهای کار با ابعاد در jQuery)

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});
خودتان امتحان کنید »

اگر مقدار "true" به متد ()outerWidth ارسال شود، مقدار خصوصیت width شامل مقادیر padding و border و margin نیز خواهد شد.

اگر مقدار "true" به متد ()outerHeight ارسال شود، مقدار خصوصیت height شامل مقادیر padding و border و margin نیز خواهد شد.

مثال (متدهای کار با ابعاد در jQuery)

$("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

در مثال زیر، مقدار خصوصیت های width و height عنصر "document" (سند HTML) و عنصر "window" (پنجره مرورگر) نمایش داده می شود:

مثال (متدهای کار با ابعاد در jQuery)

$("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);
});
خودتان امتحان کنید »

در مثال زیر، مقدار خصوصیت های width و height عنصر با شناسه "div1" با مقدار "500" تنظیم شده است:

مثال (متدهای کار با ابعاد در jQuery)

$("button").click(function(){
  $("#div1").width(500).height(500);
});
خودتان امتحان کنید »

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی