التابع .width() في jQuery
.width()
القيمة المعادة
يُعيد كائنًا من النوع Number.
الوصف
إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة.
.width()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا الشكل أي وسائط.
الفرق بين .css(width) و .width() هو أن الأخير يعيد قيمة البكسل بدون وحدة (على سبيل المثال، 400) في حين أن الأول يعيد القيمة مع وحدات سليمة (على سبيل المثال، 400px). يفضل إستخدام التابع .width() عند الحاجة لاستخدام عرض العنصر في حسابات رياضية.
يستطيع هذا التابع أيضًا إيجاد عرض النافذة والمستند:
// إعادة عرض منفذ العرض بالمتصفح
$( window ).width();
// إعادة عرض مستند HTML
$( document ).width();
لاحظ أن .width() سيعرض دائمًا عرض المحتوى، بغض النظر عن قيمة خاصية box-sizing الموجودة في CSS. بدءًا من الإصدار jQuery 1.8، قد يتطلب هذا الحصول على قيمة خاصية box-sizing في CSS، ثم طرح قيمة أي إطار border وحاشية padding محتملَين لكل عنصر عندما يكون للعنصر box-sizing: border-box. لتجنب هذه الصعوبة، تُستخدم .css( "width" ) بدلاً من .width().
ملاحظة: على الرغم من أن العنصرين <style> و <script> سيُعيدان قيمة من التابعَين .width() أو .height() عند جعل موضعهما position مطلقًا absolute مع ضبط display: block، إلا أنه لا يُشجع بتاتًا استدعاء هذين التابعَين على هذين العنصرين. بالإضافة إلى كونها ممارسة سيئة، فقد تكون النتائج غير موثوق بها.
ملاحظات إضافية
- قد يكون الرقم المُعاد بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد، بما في ذلك
.width() رقمًا كسريًا فى بعض الحالات. يجب ألا تفترض أنه عدد صحيح. أيضًا، قد تكون الأبعاد غير صحيحة عند تكبير الصفحة بواسطة المستخدم؛ فالمتصفحات لا تعرض واجهة برمجية لاكتشاف وقوع هذه الحالة. - من غير المضمون أن تكون القيمة المُعادة من التابع
.width() دقيقةً عندما يكون العنصر أو أصله (العنصر الأب) مخفيَّين. للحصول على قيمة دقيقة، يجب التأكد من أن العنصر مرئي قبل استخدام .width(). سيحاول jQuery عرض العنصر مؤقتًا ثم إعادة إخفاؤه لقياس أبعاده، ولكن هذا غير عملي (حتى مع كونه دقيقًا) ويمكن أن يؤثر بشكل كبير على أداء الصفحة. قد تُزال ميزة قياس العرض والإخفاء هذه في إصدار مستقبلي من jQuery.
أمثلة
عرض قياسات مختلف العناصر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>width مثال على التابع</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">إعادة عرض الفقرة</button>
<button id="getd">إعادة عرض المستند</button>
<button id="getw">إعادة عرض النافذة</button>
<div> </div>
<p>
هذه الفقرة عينة لاختبار العرض
</p>
<script>
function showWidth( ele, w ) {
$( "div" ).text( "عرض " + ele + " هو " + w + "بكسل." );
}
$( "#getp" ).click(function() {
showWidth( "الفقرة", $( "p" ).width() );
});
$( "#getd" ).click(function() {
showWidth( "المستند", $( document ).width() );
});
$("#getw").click(function() {
showWidth( "النافذة", $( window ).width() );
});
</script>
</body>
</html>
.width( value )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ضبط عرض CSS لكل عنصر في مجموعة العناصر المُطابقة.
.width( value )
أُضيف مع الإصدار: 1.0.
value
عدد صحيح من النوع Number يمثل عدد البكسلات، أو عدد صحيح مع وحدة قياس اختيارية ملحقة (كسلسلة) من النوع String.
.width( function )
أُضيف مع الإصدار: 1.4.1.
function
دالة تُعيد العرض المراد ضبطه. وهي تستقبل موضع فهرس العنصر في المجموعة والقيمة القديمة كوسائط. داخل الدالة، يشير this إلى العنصر الحالي في المجموعة. وهي على الشكل Function( Integer index, Integer value ) => String or Number.
عند استدعاء .width("value")، يمكن أن تكون القيمة سلسلة (رقم ووحدة) أو رقم. إذا مُرر رقم فقط كقيمة، فستفترض jQuery أن الوحدة هي بكسل. لكن إذا مُررت سلسلة نصية، فيمكن استخدام أي قياس عرض صالح في CSS (مثل 100px أو 50% أو auto). لاحظ أنه في المتصفحات الحديثة، لا تتضمن خاصية العرض في CSS الحاشية padding، أو الإطار border، أو الهامش margin، ما لم تُستخدم خاصية box-sizing في CSS.
إذا لم تُحدد وحدة صريحة (مثل "em" أو "%")، فستُفترض على أنها "px".
لاحظ أن .width("value") يضبط عرض صندوق المحتوى بغض النظر عن قيمة خاصية box-sizing في CSS.
أمثلة
تغيير عرض كل عنصر <div> في المرة الأولى التي يُنقر فوقه (وتغيير لونه):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>width مثال على التابع</title>
<style>
div {
width: 70px;
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 = 50;
$( "div" ).one( "click", function() {
$( this ).width( modWidth ).addClass( "mod" );
modWidth -= 8;
});
</script>
</body>
</html>