jQuery الأبعاد

من خلال jQuery، يمكن معالجة أبعاد العناصر ونوافذ المتصفح بسهولة.

طرق jQuery الأبعاد

يقدم jQuery عدة طرق مهمة لتعامل الأبعاد:

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

طريقة jQuery width() و height()

يستخدم طريقة width() لتعيين أو تحديد العرض للعنصر (باستثناء الهوامش الداخلية، الحواف أو الهوامش الخارجية).

يستخدم طريقة height() لتعيين أو تحديد الارتفاع للعنصر (باستثناء الهوامش الداخلية، الحواف أو الهوامش الخارجية).

في هذا المثال، يعود العرض والارتفاع للعنصر المحدد <div>:

مثال

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

جرب بنفسك

طريقة jQuery innerWidth() و innerHeight()

يستخدم طريقة innerWidth() لتحديد العرض للعنصر (بما في ذلك الهوامش الداخلية).

يستخدم طريقة innerHeight() لتحديد الارتفاع للعنصر (بما في ذلك الهوامش الداخلية).

في هذا المثال، يعود القيمة المحددة لـ <div> لتعريف عرض/ارتفاع الداخلية:

مثال

$("button").click(function(){
  var txt="";
  txt += "عرض الداخلية: " + $("#div1").innerWidth() + "</br>";
  txt += "ارتفاع الداخلية: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

جرب بنفسك

طريقة jQuery outerWidth() و outerHeight()

تستخدم طريقة outerWidth() لإرجاع العرض للعنصر (بما في ذلك الهوامش الداخلية والهوامش الخارجية).

تستخدم طريقة outerHeight() لإرجاع الارتفاع للعنصر (بما في ذلك الهوامش الداخلية والهوامش الخارجية).

في المثال التالي، يتم إرجاع عرض الظاهر/ارتفاع الظاهر للعنصر <div> المحدد:

مثال

$("button").click(function(){
  var txt="";
  txt+="عرض الظاهر: " + $("#div1").outerWidth() + "</br>";
  txt+="ارتفاع الظاهر: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

جرب بنفسك

يستخدم طريقة outerWidth(true) لإرجاع العرض للعنصر (بما في ذلك الهوامش الداخلية والهوامش الخارجية).

يستخدم طريقة outerHeight(true) لإرجاع الارتفاع للعنصر (بما في ذلك الهوامش الداخلية والهوامش الخارجية).

مثال

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