اندازه jQuery

با استفاده از jQuery، ساده است که اندازه عناصر و پنجره مرورگر را مدیریت کرد.

روش‌های اندازه jQuery

jQuery چندین روش مهم برای تعامل با اندازه‌ها را ارائه می‌دهد:

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

روش‌های width() و height() jQuery

روش width() عرض عناصر را تنظیم یا بازمی‌گرداند (بدون فضای داخلی، حاشیه یا پادشاهی).

روش height() ارتفاع عناصر را تنظیم یا بازمی‌گرداند (بدون فضای داخلی، حاشیه یا پادشاهی).

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

مثال

$("button").click(function(){
  var txt="";
  txt += "عرض: " + $("#div1").width() + "</br>";
  txt += "طول: " + $("#div1").height();
  $("#div1").html(txt);
});

تست کنید

روش‌های innerWidth() و innerHeight() jQuery

روش innerWidth() عرض عناصر (شامل فضای داخلی) را برمی‌گرداند.

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

مثال زیر به بازگشت inner-width/height عناصر <div> مشخص شده اشاره دارد:

مثال

$("button").click(function(){
  var txt="";
  txt += "عرض داخلی: " + $("#div1").innerWidth() + "</br>";
  txt += "طول داخلی: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

تست کنید

روش‌های outerWidth() و outerHeight() jQuery

روش outerWidth() عرض عناصر را (درcluding padding و border) بازمی‌گرداند.

روش outerHeight() ارتفاع عناصر را (درcluding padding و border) بازمی‌گرداند.

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

مثال

$("button").click(function(){
  var txt="";
  txt+="عرض بیرونی: " + $("#div1").outerWidth() + "</br>";
  txt+="ارتفاع بیرونی: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

تست کنید

روش outerWidth(true) عرض عناصر را (درcluding padding, border و margin) بازمی‌گرداند.

روش outerHeight(true) ارتفاع عناصر را (درcluding padding, border و margin) بازمی‌گرداند.

مثال

$("button").click(function(){
  var txt="";
  txt+="عرض بیرونی (+ماریجین): " + $("#div1").outerWidth(true) + "</br>";
  txt+="ارتفاع بیرونی (+ماریجین): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

تست کنید

jQuery - بیش از width() و height()

در مثال زیر، عرض و ارتفاع مستند (HTML مستند) و پنجره (نمای کلی مرورگر) بازگردانده می‌شود:

مثال

$("button").click(function(){
  var txt="";
  txt+="عرض/ارتفاع مستند: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="عرض/ارتفاع پنجره: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

تست کنید

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

مثال

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

تست کنید

کتابخانه مرجع jQuery CSS

برای دسترسی به مرجع کامل jQuery Dimensions، لطفاً به کتابخانه مرجع jQuery ما مراجعه کنید.