jQuery 3.3

.outerHeight()




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

.outerHeight ([includeMargin]) إرجاع: Number

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

  • وأضاف الإصدار: 1.2.6 .homeHeight ([includeMargin])

    • includeMargin (افتراضي: false )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كان سيتم تضمين هامش العنصر في الحساب.

لعرض ارتفاع العنصر ، بما في ذلك المساحة العلوية والسفلية ، والحد ، والهامش الاختياري ، بالبكسل. إذا تمت دعوتك على مجموعة فارغة من العناصر ، undefined تُرجع undefined ( null قبل jQuery 3.0).

لا تسري هذه الطريقة على كائنات window document ؛ لهذه ، استخدم .height() بدلاً من ذلك. على الرغم من أنه يمكن استخدام .outerHeight() في عناصر الجدول ، إلا أنه قد يعطي نتائج غير متوقعة على الجداول باستخدام border-collapse: collapse خاصية CSS.

الشكل 1 - توضيح الارتفاع المقاس

ملاحظات إضافية:

  • قد يكون الرقم الذي يتم إرجاعه بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد ، بما في ذلك .outerHeight() ، .outerHeight() في بعض الحالات. يجب ألا نفترض أن الكود عبارة عن عدد صحيح. أيضًا ، قد تكون الأبعاد غير صحيحة عندما يتم تكبير الصفحة بواسطة المستخدم ؛ لا تعرض المستعرضات واجهة برمجة التطبيقات لاكتشاف هذا الشرط.
  • لا يتم ضمان القيمة التي تم الإبلاغ عنها بواسطة .outerHeight() لتكون دقيقة عند إخفاء العنصر أو .outerHeight() . للحصول على قيمة دقيقة ، تأكد من أن العنصر مرئي قبل استخدام. .outerHeight() . سيحاول jQuery عرض عنصر ما مؤقتًا ثم إعادة إخفاؤه بقياس أبعاده ، ولكن هذا غير موثوق به (وحتى عندما يكون دقيقاً) يمكن أن يؤثر بشكل كبير على أداء الصفحة. قد تتم إزالة ميزة قياس العرض والعيش هذا في إصدار مستقبلي من jQuery.

مثال:

احصل على الخارجي للفقرة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text(
  "outerHeight:" + p.outerHeight() +
  " , outerHeight( true ):" + p.outerHeight( true ) );
</script>
 
</body>
</html>

عرض:

.outerHeight (القيمة) الإرجاع: jQuery

الوصف: اضبط ارتفاع CSS الخارجي لكل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.8.0 .بعد الارتفاع (القيمة)

    • القيمة
      النوع: String أو Number
      رقم يمثل عدد البكسل ، أو رقم مع وحدة قياس اختيارية ملحقة (كسلسلة).
  • الإصدار المضاف: 1.8.0 .outerHeight (وظيفة)

    • وظيفة
      النوع: Function (مؤشر Integer ، ارتفاع Number ) => String أو Number
      دالة تعيد الارتفاع الخارجي للضبط. يستقبل موضع فهرس العنصر في المجموعة والارتفاع الخارجي القديم كوسيطة. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

عند الاتصال .outerHeight(value) ، يمكن أن تكون القيمة إما سلسلة (رقم ووحدة) أو رقم. إذا تم توفير رقم فقط للقيمة ، يفترض jQuery وحدة بكسل. إذا تم توفير سلسلة ، ومع ذلك ، يمكن استخدام أي قياس CSS صالح (مثل 100px أو 50% أو auto ).

مثال:

تغيير الارتفاع الخارجي لكل div في أول مرة يتم النقر فوقه (وتغيير لونه).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  div {
    width: 50px;
    padding: 10px;
    height: 60px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modHeight = 60;
$( "div" ).one( "click", function() {
  $( this ).outerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});
</script>
 
</body>
</html>

عرض: