الفرق بين المراجعتين لصفحة: «jQuery/innerHeight»
جميل-بيلوني (نقاش | مساهمات) هذه الصفحة من مساهمات عدنان أمزيان. |
لا ملخص تعديل |
||
| سطر 117: | سطر 117: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/innerHeight/ صفحة التابع .innerHeight() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/innerHeight/ صفحة التابع .innerHeight() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery CSS]] | [[تصنيف:jQuery CSS]] | ||
[[تصنيف:jQuery Dimensions]] | [[تصنيف:jQuery Dimensions]] | ||
[[تصنيف:jQuery Manipulation]] | [[تصنيف:jQuery Manipulation]] | ||
المراجعة الحالية بتاريخ 09:54، 29 مايو 2018
يعيد هذا التابع قيمة الطول الحالي (تتضمن قيمة الحواشي فقط دون الإطار) لأول عنصر في مجموعة العناصر المطابقة أو يغير الطول الداخلي لكل العناصر المطابقة.
.innerHeight()
القيم المعادة
يعيد عدد من النوع Number.
الوصف
يعيد هذا التابع قيمة الطوال الحالي (من ضمنها قيمة الحواشي فقط دون إطار) لأول عنصر في مجموعة العناصر المطابقة.
.innerHeight()
أضيف مع الإصدار: 1.2.6، ولا يقبل هذا التابع أي معاملات.
يعيد هذا التابع قيمة طول العنصر، وتدخل قيمة الحواشي العليا والسفلى ضمن تلك القيمة، بواحدة البكسل. إن كان كائن jQuery فارغًا واستعمل التابع معه، فسيعيد القيمة undefined (أو القيمة null قبل الإصدار jQuery 3.0).
لا يمكن استعمال هذا التابع مع الكائن window والكائن document. للحصول على عرض هذه الكائنات، يجب استعمال التابع .height() عوضًا عن ذلك.
ملاحظات إضافية
يمكن للعدد الذي تعيده الواجهات البرمجية (APIs) المتعلقة بالأبعاد، من ضمنها ()innerHeight.، أن يكون كسريًّا في بعض الحالات، لذا لا يجب للشيفرة افتراض أن ذلك العدد عدد صحيح. يمكن للأبعاد أيضًا أن تكون خطأ عندما تكون الصفحة مكبرة من طرف المستخدم، إذ لا توفّر المتصفحات واجهةً برمجيةً لمعرفة أنَّ هذه الحالة قد وقعت.
لا يمكن ضمان أن القيمة التي يعيدها التابع ()innerHeight. ستكون دقيقة إن كان العنصر أو العنصر الأب الخاص به مخفيين. للحصول على قيمة دقيقة، يجب التأكد من أن العنصر مرئي قبل استعمال التابع. رغم ذلك، ستحاول jQuery إظهار العنصر لقياس أبعاده ثم إخفائه، ولكن هذه الطريقة غير مضمونة (حتى إن أُعيدت بوساطتها قيمة دقيقة)، إذ من الممكن أن تؤثر بشكل ملحوظ عن أداء الصفحة. يحتمل أن تحذف طريقة الإظهار والإخفاء هذه المستعملة في القياس في إصدارات jQuery القادمة.
أمثلة
جلب قيمة الطول الداخلي لفقرة <p>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>innerHeight 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( "innerHeight:" + p.innerHeight() );
</script>
</body>
</html>
.innerHeight( value )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يغير هذا التابع الطول الداخلي لكل عنصر في مجموعة العناصر المطابقة.
.innerHeight( value )
أضيف مع الإصدار: 1.8.0.
value
عددٌ دون واحدة يمثل قيمة العرض بالبكسل، أو سلسلة نصية تمثل قيمة العرض مضافًا إليها واحدة القياس المراد استعمالها.
.innerHeight( function )
أضيف مع الإصدار 1.8.0
function
دالة من الشكل Function( Integer index, Number height ) تعيد القيمة الجديدة للعرض الداخلي (تتضمن قيمة الحواشي فقط دون الإطار). يمرر إلى هذه الدالة معاملين اثنين هما: فهرسٌ يمثل موضع العنصر في مجموعة العناصر المطابقة، و العرض الداخلي القديم لذاك العنصر. تشير this داخل الدالة إلى العنصر الحالي ذي الفهرس المعطى.
عند استدعاء التابع .innerHeight("value")، يمكن أن يكون المعامل value سلسلة نصية (عددًا وبجانبه واحدة)، أو عددًا. إذا كان المعامل عددًا، فتفترض jQuery أن الواحدة المستعملة هي البكسل. أما إذا كان المعامل سلسلة نصية، فيمكن استعمال أي واحدة قياس تدعمها CSS (مثل 100px، أو 50%، أو auto ). يجب الانتباه إلى أنه في المتصفحات الحديثة، لا تتضمن قيمة خاصية الطول في CSS قيمة الحواشي، أو الإطار، أو الهوامش، إلا إذا استعملت الخاصية box-sizing.
إذا لم تُحدد واحدة قياس (مثل 'em' أو '%')، فإن الواحدة الافتراضية التي ستستعمل هي البكسل ‘px’.
أمثلة
تغيير الطول الداخلي و اللون لكل عناصر <div> عند النقر عليها لأول مرة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>innerHeight demo</title>
<style>
div {
width: 60px;
padding: 10px;
height: 70px;
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 = 70;
$( "div" ).one( "click", function() {
$( this ).innerHeight( modHeight ).addClass( "mod" );
modHeight -= 8;
});
</script>
</body>
</html>