jQuery 3.3

.height()




jquery
احصل على الارتفاع المحسوب الحالي للعنصر الأول في مجموعة العناصر المتطابقة أو قم بتعيين ارتفاع كل عنصر متطابق.

.height () إرجاع: Number

الوصف: احصل على الارتفاع المحسوب الحالي للعنصر الأول في مجموعة العناصر المتطابقة.

  • الإصدار المضافة: 1.0 .height()

    • هذه الطريقة لا تقبل أي حجج.

الفرق بين .css( "height" ) و .height() هو أن الأخير يقوم بإرجاع قيمة بكسل أقل من وحدة (على سبيل المثال ، 400 ) بينما تقوم القيمة السابقة بإرجاع قيمة مع الوحدات سليمة (على سبيل المثال ، 400 بكسل). .height() طريقة .height() عندما يحتاج ارتفاع العنصر لاستخدامه في الحساب الرياضي.

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

هذه الطريقة هي أيضا قادرة على العثور على ارتفاع النافذة والوثيقة.

// Returns height of browser viewport
$( window ).height();
 
// Returns height of HTML document
$( document ).height();

لاحظ أن .height() سيعرض دائمًا ارتفاع المحتوى ، بغض النظر عن قيمة خاصية تغيير box-sizing CSS. اعتبارًا من jQuery 1.8 ، قد يتطلب ذلك استرداد قيمة CSS بالإضافة إلى box-sizing ثم طرح أي حدود محتملة وحشو على كل عنصر عندما يحتوي العنصر box-sizing: border-box . لتجنب هذه العقوبة ، استخدم .css( "height" ) بدلاً من .height() .

ملاحظة: على الرغم من أن علامات style script ستقوم بالإبلاغ عن قيمة لـ .width() أو height() عندما يتم .width() تمامًا display:block ، إلا أنه لا يُشجع بشدة على استدعاء هذه الطرق على هذه العلامات. بالإضافة إلى كونها ممارسة سيئة ، قد تكون النتائج غير موثوق بها.

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

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

مثال:

عرض ارتفاعات مختلفة. لاحظ أن القيم مأخوذة من iframe ، لذا فقد تكون أصغر من المتوقع. يظهر التمييز الأصفر جسد iframe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
 
<div>&nbsp;</div>
<p>
  Sample paragraph to test height
</p>
 
<script>
function showHeight( element, height ) {
  $( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#getp" ).click(function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).click(function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).click(function() {
  showHeight( "window", $( window ).height() );
});
</script>
 
</body>
</html>

عرض:

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

الوصف: عيّن ارتفاع CSS لكل عنصر متطابق.

  • الإصدار المضافة: 1.0 .height (القيمة)

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

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

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

إذا لم يتم تحديد وحدة صريحة (مثل 'em' أو '٪') ، فسيتم ربط "px" بالقيمة.

لاحظ أن .height(value) يحدد ارتفاع المحتوى للمربع بغض النظر عن قيمة خاصية تغيير box-sizing CSS.

مثال:

لتعيين ارتفاع كل div بنقرة ، انقر على 30 بكسل بالإضافة إلى تغيير اللون.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  div {
    width: 50px;
    height: 70px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).one( "click", function() {
  $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});
</script>
 
</body>
</html>

عرض: