اندازه jQuery

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

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

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

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

توابع width() و height() jQuery

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

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

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

مثال

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

آپ خود سنجیدہ کریں

توابع innerWidth() و innerHeight() jQuery

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

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

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

مثال

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

آپ خود سنجیدہ کریں

jQuery outerWidth() اور outerHeight() مہارتیں

outerWidth() مہارت کا استعمال کیا جاتا ہے تاکہ عناصر کی چوڑائی کو (بندوقفص اور لچک شامل) حاصل کیا جائے۔

outerHeight() مہارت کا استعمال کیا جاتا ہے تاکہ عناصر کی اونچائی کو (بندوقفص اور لچک شامل) حاصل کیا جائے۔

درج ذیل مثال میں مخصوص <div> عناصر کی بیرونی چوڑائی اور اونچائی کو سہولت دی گئی ہے:

مثال

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

آپ خود سنجیدہ کریں

outerWidth(true) مہارت کا استعمال کیا جاتا ہے تاکہ عناصر کی چوڑائی کو (بندوقفص، لچک، اور بیرونی پیمانہ شامل) حاصل کیا جائے۔

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);
});

آپ خود سنجیدہ کریں

jQuery - مزید width() اور height()

درج ذیل مثال میں ڈاکومن (HTML ڈاکومن) اور ونڈو (بrowser ویندوز) کی چوڑائی اور اونچائی کو سہولت دی گئی ہے:

مثال

$("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 CSS مراجع دستاویز

jQuery Dimensions کی پورتی مراجع کے لئے، ہمارے jQuery سائز مراجع دستاویز کا دورہ کریں۔