الحجم jQuery

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

jQuery يقدم طرقًا فعالة لمعالجة حجم العناصر.

في هذا الفصل، سنشرح كيفية الحصول أو تعيين حجم عنصر HTML.

طرق حجم jQuery

لدينا هذه الطرق في jQuery لمعالجة الأحجام:

• عرض()

• طول()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

سأوضح لك كيفية استخدام كل طريقة.

فهم حجم jQuery

انظر إلى الشكل أدناه لفهم كيفية حساب حجم العنصر

طريقة عرض jQuery و طول jQuery

jQuery عرض()يتم استخدام هذه الطريقة للحصول أو تعيين عرض العنصر المحدد (لا يحتوي على الهوامش الداخلية، الحواف، والهوامش الخارجية).

jQuery طول()يتم استخدام هذه الطريقة للحصول أو تعيين طول العنصر المحدد (لا يحتوي على الهوامش الداخلية، الحواف، والهوامش الخارجية).

في هذا المثال، يتم الحصول على عرض وتطول عنصر DIV:

$("div").click(function(){
　　let w = $(this).width();
　　let h = $(this).height();
　　$(this).html("عرض DIV: \n" + w + "<br>" + "طول DIV: \n" + h);
});

في هذا المثال يتم ضبط عرض و طول جميع الفقرات:

$("button").click(function(){
　　$("p").width(250);
　　$("p").height(100);
});

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

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

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

في هذا المثال يتم الحصول على العرض والطول الداخلي للعنصر div:

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("عرض الداخلي: " + w + "<br>" + "طول الداخلي: " + h);
});

طريقة jQuery externalWidth() و outsideHeight()

jQuery outerWidth()يحصل هذا الطريقة على أو يضبط عرض العنصر المحدد (بما في ذلك الهوامش الداخلية والهوامش).

jQuery outerHeight()يحصل هذا الطريقة على أو يضبط طول العنصر المحدد (بما في ذلك الهوامش الداخلية والهوامش).

في هذا المثال يتم الحصول على العرض والطول الخارجي للعنصر div:

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("عرض الظاهري: " + w + "<br>" + "طول الظاهري: " + h);
});

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

outerHeight(true) يحصل هذا الطريقة على أو يضبط طول العنصر المحدد (بما في ذلك الهوامش الداخلية والهوامش الخارجية والهوامش).

في هذا المثال يتم الحصول على العرض والطول الخارجي للعنصر div (بما في ذلك الهوامش):

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("عرض الظاهري [+margin]:" + w + "<br>" + "طول الظاهري [+margin]: " + h);
});

مزيد من الأمثلة

عرض width()،height()،innerWidth()،innerHeight()،outerWidth() و outerHeight() الفروق بينها:

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

يمكن العثور أيضًا على عرض وارتفاع النافذة والملف:

$(window).width(); // عودة عرض نافذة المتصفح
$(document).width(); // عودة عرض ملف HTML
$(window).height(); // عودة طول نافذة المتصفح
$(document).height(); // عودة طول ملف HTML

مرجع CSS jQuery

للحصول على مرجع كامل لمتغيرات CSS، يرجى زيارةمرجع HTML / CSS jQuery。