التابع .height() في jQuery
يجلب هذا التابع الطول الحالي لأول عنصر في مجموعة العناصر المتطابقة أو يغير الطول لكل العناصر المتطابقة.
.height()
القيم المعادة
عدد من النوع Number.
الوصف
يجلب هذا التابع الطول الحالي لأول عنصر في مجموعة العناصر المتطابقة سابقًا.
.height()
أضيف مع الإصدار 1.0، ولا يقبل هذا التابع أي معاملات.
الفرق بين التابع .css( "height" ) والتابع .height() هو أن الأخير يعيد قيمة الطول بدون واحدة (يعيد 400 مثلًا)، بينما يعيد التابع الأول قيمة الطول مع واحدة (يعيد 400px مثلًا). يفضل استعمال التابع .height() عندما الحاجة إلى استعمال طول العنصر في حسابات رياضية.
يمتلك هذا التابع أيضًا القدرة على إيجاد طول نافذة المتصفح و طول الصفحة.
// إعادة ارتفاع إطار العرض
$( window ).height();
// إعادة ارتفاع المستند
$( document ).height();
يجب الانتباه إلى أن التابع .height() يعيد طول صندوق المحتوى دومًا بغض النظر عن قيمة الخاصية box-sizing في CSS. قد يتطلَّب ابتداءًا من الإصدار jQuery 1.8 استرجاع قيمة الخاصية height في CSS بالإضافة إلى قيمة الخاصية box-sizing للحصول على طول المحتوى، ثمَّ يُطرح بعد ذلك قيمة الحواشي أو الإطار لكل عنصر عندما تكون قيمة الخاصية box-sizing هي نفسها border-box. لتجنب هذا التعقيد، استعمل التابع .css( "height" ) عوضًا عن التابع .height().
ملاحظة: رغم أن العناصر <style> و <script> ستبلغ عن قيمةٍ للتابع .width() أو التابع .height() عند ضبط خاصيات CSS التالية عليها: position: absolute و display: block، إلا أنَّه لا ينصح مطلقًا استعمال هذه التوابع مع تلك العناصر. بالإضافة إلى كون هذا عادة سيئة، ومن الممكن أن تكون النتائج غير صحيحة.
ملاحظات إضافية
- يمكن للعدد الذي يُعاد باستعمال الواجهات البرمجية (API) المتعلقة بالأبعاد، بما في ذلك التابع
()height.، أن يكون عددًا كسريًا في بعض الحالات، لذا لا يجب للشيفرة المكتوبة أن تفترض بأنه عدد صحيح. يمكن للأبعاد أيضًا أن تكون خطأ عندما تكون الصفحة مكبرة (zoomed) من طرف المستخدم، إذ لا تعطي المتصفحات واجهةً برمجيةً للتعرف تلك على هذه الحالة. - لا يمكن ضمان أن القيمة التي يعيدها التابع
()height.دقيقةٌ في حالة أن العنصر أو أبوه مخفيين (hidden). للحصول على قيمة دقيقة، يجب التأكد من أن العنصر مرئي قبل استعمال التابع. رغم ذلك، ستحاول jQuery إظهار العنصر لقياس أبعاده و من ثم إخفاه، ولكن هذه الطريقة غير مضمونة (حتى لو أُعيدت قيم دقيقة)، إذ من الممكن أن تؤثر بشكل ملحوظ عن أداء الصفحة. من المحتمل حذف طريقة الإظهار والإخفاء هذه، المستعملة في القياس، في إصدارات jQuery القادمة.
أمثلة
إظهار أطوال مختلفة. يجب الإنتباه إلى أن القيم تتعلق بالإطار المراد الحصول على طوله، لذا من الممكن أن تكون القيم أصغر مما تتوقع. الخلفية الصفراء توضح جسم الإطار.
<!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> </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( value )
القيم المعادة
يعيد كائن jQuery.
الوصف
يغير هذا التابع طول عنصر CSS لكل العناصر المطابقة.
height( value ).
أضيف مع الإصدار 1.0.
value
سلسلة نصية تحتوي على عدد مع واحدة أو عدد بدون واحدة ويمثلان عدد البكسلات (pixels).
.height( function )
أضيف مع الإصدار 1.8.0.
function
دالة من الشكل Function( Number index, Number height ) تعيد سلسلة نصية أو عددًا يمثل قيمة الطول. يمرر لهذه الدالة معاملين اثنين هما: فهرس يمثل موضع العنصر في مجموعة العناصر المطابقة، والطول القديم. داخل الدالة، تشير this إلى العنصر الحالي ضمن المجموعة.
عند استدعاء التابع height(value).، يمكن أن يكون المعامل value سلسلة نصية (عددًا وبجانبه واحدة) أو عددًا. إذا كان المعامل عددًا فإن jQuery تفترض أن الواحدة المستعملة هي البكسل. أما إذا كان المعامل سلسلة نصية فيمكن استعمال أي واحدة قياس تدعمها CSS للارتفاع (مثل 100px أو 50% أو auto). يجب الانتباه إلى أنه في المتصفحات الحديثة لا تتضمن قيمة خاصية الطول في CSS قيمة الحواشي، أو الإطار، أو الهوامش.
إذا لم تُحدَّد واحدة قياس (مثل 'em' أو '%')، فإن الواحدة الافتراضية التي ستستعمل هي البكسل ‘px’.
يجب الانتباه إلى أن التابع .height(value) يغير طول محتوى الصندوق بغض النظر عن قيمة خاصية box-sizing في CSS.
أمثلة
تغيير اللون إلى الأخضر و تغيير الطول إلى 30px عند النقر على أي عنصر <div>:
<!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>