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

قد يكون الحصول على ارتفاع div أمرًا صعبًا إذا لم يكن هناك ارتفاع محدد بشكل صريح في CSS. على الرغم من أن طريقة jQuery .height() تُستخدم عادةً لهذا الغرض، إلا أنها تتطلب قاعدة CSS موجودة للحصول على الوظيفة المناسبة. إليك طريقة بديلة:

وظائف الارتفاع jQuery

• .height(): يستثني الحشو والحدود و هامش.
• .innerHeight(): يتضمن الحشو ولكنه يستبعد الحدود والهامش.
• .outerHeight(): يتضمن الحدود ولكنه يستبعد الهامش.
• .outerHeight (صحيح): يشمل الهامش.

الاستخدام العرض التوضيحي

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

الإخراج: