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