تحديد ارتفاع العناصر بدون قواعد ارتفاع CSS

في غياب قاعدة ارتفاع CSS لعنصر ما، قد يكون من الصعب الحصول عليها ارتفاعه. يبدو الأسلوب jQuery .height()، الذي يتطلب قيمة ارتفاع CSS محددة مسبقًا، غير مناسب في هذا السيناريو. ومع ذلك، هناك طرق بديلة لتحديد ارتفاع العنصر.

jQuery .height()

خلافًا للاعتقاد الشائع، فإن jQuery .height() لا يعتمد على على تعريف ارتفاع CSS. فهو يحسب الارتفاع المحسوب للعنصر، مما يجعله مناسبًا للسيناريوهات التي لا يتم فيها تحديد ارتفاع CSS صريح.

DEMO

.height(): يسترد ارتفاع العنصر بدون حشوة أو حدود أو هامش.

.innerHeight(): يسترد ارتفاع العنصر بما في ذلك الحشو ولكن باستثناء الحدود و هامش.

.outerHeight(): استرداد ارتفاع العنصر بما في ذلك الحدود ولكن باستثناء الهامش.

.outerHeight(true): استرداد ارتفاع العنصر بما في ذلك الحد والهامش.

مقتطف الكود للعرض التجريبي المباشر

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('
Height (.height() returns) : '   $heightTest.height()   ' [Just Height]
')
    .append('
Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]
')
    .append('
Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]
')
    .append('
Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]
')
});