التابع .width() في jQuery
.width()
القيمة المعادة
يُعيد كائنًا من النوع Number.
الوصف
إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة.
.width()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا الشكل أي وسائط.
الفرق بين .css(width) و .width() هو أن الأخير يعيد قيمة البكسل بدون وحدة (على سبيل المثال، 400) في حين أن الأول يعيد القيمة مع وحدات سليمة (على سبيل المثال، 400px). يفضل إستخدام التابع .width() عند الحاجة لاستخدام عرض العنصر في حسابات رياضية.
الشكل 1 - رسم توضيحي للعرض المُقاس
يستطيع هذا التابع أيضًا إيجاد عرض النافذة والمستند.
// إعادة عرض منفذ العرض بالمتصفح
$( 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() عند تحديد موضعها المطلق مع افتراض display:block، إلا أنه لا يُشجع بتاتًا استدعاء هذين التابعَين على هذين الوسمَين. بالإضافة إلى كونها ممارسة سيئة، قد تكون النتائج غير موثوق بها.
ملاحظات إضافية
- قد يكون الرقم المُعاد بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد، بما في ذلك
.width() رقمًا كسريًا فى بعض الحالات. يجب ألا تفترض الشيفرة أنه عدد صحيح. أيضًا، قد تكون الأبعاد غير صحيحة عند تكبير الصفحة بواسطة المستخدم؛ فالمتصفحات لا تعرض واجهة برمجة التطبيقات لاكتشاف هذا الشرط. - القيمة المُعادة من التابع
.width() غير مضمون أن تكون دقيقة عندما يكون العنصر أو أصله مخفيَّين. للحصول على قيمة دقيقة، يجب التأكد من أن العنصر مرئي قبل استخدام .width(). سيحاول jQuery عرض العنصر مؤقتًا ثم إعادة إخفاؤه لقياس أبعاده، ولكن هذا غير عملي (حتى مع كونه دقيقاً) ويمكن أن يؤثر بشكل كبير على أداء الصفحة. قد تُزال ميزة قياس العرض والإخفاء هذه في إصدار مستقبلي من jQuery.
أمثلة
عرض مختلف الأعراض. لاحظ أن القيم مأخوذة من iframe، لذا فقد تكون أصغر من المتوقع. يميز اللون الأصفر العنصر body للـ iframe.
<!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>