الفرق بين المراجعتين لصفحة: «jQuery/width»
< jQuery
Khaled-yassin (نقاش | مساهمات) لا ملخص تعديل |
Khaled-yassin (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.width()</code> في jQuery}}</noinclude> | إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة، أو ضبط عرض CSS لكل عنصر في مجموعة العناصر المُطابقة.<noinclude>{{DISPLAYTITLE:التابع <code>.width()</code> في jQuery}}</noinclude> | ||
== <code>.width()</code> == | == <code>.width()</code> == | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
يُعيد كائنًا من النوع [[JavaScript/Number|Number]]. | يُعيد كائنًا من النوع [[JavaScript/Number|<code>Number</code>]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 15: | سطر 15: | ||
الفرق بين <code>[[CSS/width|.css(width)]]</code> و <code>.width()</code> هو أن الأخير يعيد قيمة البكسل بدون وحدة (على سبيل المثال، <code>400</code>) في حين أن الأول يعيد القيمة مع وحدات سليمة (على سبيل المثال، <code>400px</code>). يفضل إستخدام التابع <code>.width()</code> عند الحاجة لاستخدام عرض العنصر في حسابات رياضية. | الفرق بين <code>[[CSS/width|.css(width)]]</code> و <code>.width()</code> هو أن الأخير يعيد قيمة البكسل بدون وحدة (على سبيل المثال، <code>400</code>) في حين أن الأول يعيد القيمة مع وحدات سليمة (على سبيل المثال، <code>400px</code>). يفضل إستخدام التابع <code>.width()</code> عند الحاجة لاستخدام عرض العنصر في حسابات رياضية. | ||
يستطيع هذا التابع أيضًا إيجاد عرض النافذة والمستند:<syntaxhighlight lang="jquery"> | |||
يستطيع هذا التابع أيضًا إيجاد عرض النافذة والمستند | |||
// إعادة عرض منفذ العرض بالمتصفح | // إعادة عرض منفذ العرض بالمتصفح | ||
$( window ).width(); | $( window ).width(); | ||
| سطر 23: | سطر 21: | ||
// إعادة عرض مستند HTML | // إعادة عرض مستند HTML | ||
$( document ).width(); | $( document ).width(); | ||
</syntaxhighlight>لاحظ أن <code>.width()</code> سيعرض دائمًا عرض المحتوى، بغض النظر عن قيمة خاصية <code>[[CSS/box-sizing|box-sizing]]</code> الموجودة في CSS. بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.8 1.8]، قد يتطلب هذا | </syntaxhighlight>لاحظ أن <code>.width()</code> سيعرض دائمًا عرض المحتوى، بغض النظر عن قيمة خاصية <code>[[CSS/box-sizing|box-sizing]]</code> الموجودة في CSS. بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.8 1.8]، قد يتطلب هذا الحصول على قيمة خاصية [[CSS/box-sizing|<code>box-sizing</code>]] في CSS، ثم طرح قيمة أي إطار <code>[[CSS/border|border]]</code> وحاشية <code>[[CSS/padding|padding]]</code> محتملَين لكل عنصر عندما يكون للعنصر <code>[[CSS/box-sizing|box-sizing: border-box]]</code>. لتجنب هذه الصعوبة، تُستخدم <code>[[CSS/width|.css( "width" )]]</code> بدلاً من <code>.width()</code>. | ||
ملاحظة: على الرغم من أن | ملاحظة: على الرغم من أن العنصرين <code>[[HTML/style|<style>]]</code> و <code>[[HTML/script|<script>]]</code> سيُعيدان قيمة من التابعَين <code>.width()</code> أو <code>[[jQuery/height|.height()]]</code> عند جعل موضعهما <code>[[CSS/position|position]]</code> مطلقًا <code>absolute</code> مع ضبط <code>[[CSS/display|display: block]]</code>، إلا أنه لا يُشجع بتاتًا استدعاء هذين التابعَين على هذين العنصرين. بالإضافة إلى كونها ممارسة سيئة، فقد تكون النتائج غير موثوق بها. | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
* قد يكون الرقم المُعاد بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد، بما في ذلك<code>.width()</code> رقمًا كسريًا فى بعض الحالات. يجب ألا تفترض | * قد يكون الرقم المُعاد بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد، بما في ذلك<code>.width()</code> رقمًا كسريًا فى بعض الحالات. يجب ألا تفترض أنه عدد صحيح. أيضًا، قد تكون الأبعاد غير صحيحة عند تكبير الصفحة بواسطة المستخدم؛ فالمتصفحات لا تعرض واجهة برمجية لاكتشاف وقوع هذه الحالة. | ||
* القيمة المُعادة من التابع <code>.width()</code> | * من غير المضمون أن تكون القيمة المُعادة من التابع <code>.width()</code> دقيقةً عندما يكون العنصر أو أصله (العنصر الأب) مخفيَّين. للحصول على قيمة دقيقة، يجب التأكد من أن العنصر مرئي قبل استخدام <code>.width()</code>. سيحاول jQuery عرض العنصر مؤقتًا ثم إعادة إخفاؤه لقياس أبعاده، ولكن هذا غير عملي (حتى مع كونه دقيقًا) ويمكن أن يؤثر بشكل كبير على أداء الصفحة. قد تُزال ميزة قياس العرض والإخفاء هذه في إصدار مستقبلي من jQuery. | ||
=== أمثلة === | === أمثلة === | ||
عرض مختلف | عرض قياسات مختلف العناصر:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 98: | سطر 96: | ||
==== <code>value</code> ==== | ==== <code>value</code> ==== | ||
عدد صحيح من النوع [[JavaScript/Number|Number]] يمثل عدد | عدد صحيح من النوع [[JavaScript/Number|<code>Number</code>]] يمثل عدد البكسلات، أو عدد صحيح مع وحدة قياس اختيارية ملحقة (كسلسلة) من النوع [[JavaScript/String|<code>String</code>]]. | ||
=== <code>.width( function )</code> === | === <code>.width( function )</code> === | ||
| سطر 104: | سطر 102: | ||
==== <code>function</code> ==== | ==== <code>function</code> ==== | ||
دالة تُعيد العرض المراد ضبطه. وهي تستقبل موضع فهرس العنصر في المجموعة والقيمة القديمة كوسائط. داخل الدالة، يشير <code>this</code> إلى العنصر الحالي في المجموعة. | دالة تُعيد العرض المراد ضبطه. وهي تستقبل موضع فهرس العنصر في المجموعة والقيمة القديمة كوسائط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة. وهي على الشكل <code>[[JavaScript/Function|Function]]( Integer index, Integer value ) => [[JavaScript/String/match|String]] or [[JavaScript/Number|Number]]</code>. | ||
وهي على الشكل [[JavaScript/Function|Function]]( Integer index, Integer value ) => [[JavaScript/String/match|String]] or [[JavaScript/Number|Number]] | |||
عند استدعاء <code>.width("value")</code>، يمكن أن تكون القيمة سلسلة (رقم ووحدة) أو رقم. إذا مُرر رقم فقط كقيمة، | عند استدعاء <code>.width("value")</code>، يمكن أن تكون القيمة سلسلة (رقم ووحدة) أو رقم. إذا مُرر رقم فقط كقيمة، فستفترض jQuery أن الوحدة هي بكسل. لكن إذا مُررت سلسلة نصية، فيمكن استخدام أي قياس عرض صالح في CSS (مثل <code>100px</code> أو <code>50%</code> أو <code>auto</code>). لاحظ أنه في المتصفحات الحديثة، لا تتضمن خاصية العرض في CSS الحاشية <code>[[CSS/padding|padding]]</code>، أو الإطار [[CSS/border|border]]، أو الهامش <code>[[CSS/margin|margin]]</code>، ما لم تُستخدم خاصية [[CSS/box-sizing|<code>box-sizing</code>]] في CSS. | ||
إذا لم تُحدد وحدة صريحة (مثل "em" أو "%")، فستُفترض "px". | إذا لم تُحدد وحدة صريحة (مثل "em" أو "%")، فستُفترض على أنها "px". | ||
لاحظ أن <code>.width("value")</code> يضبط عرض المحتوى | لاحظ أن <code>.width("value")</code> يضبط عرض صندوق المحتوى بغض النظر عن قيمة خاصية [[CSS/box-sizing|<code>box-sizing</code>]] في CSS. | ||
=== أمثلة === | === أمثلة === | ||
تغيير عرض كل عنصر <nowiki><div> في المرة الأولى التي يُنقر فوقه (وتغيير لونه) | تغيير عرض كل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في المرة الأولى التي يُنقر فوقه (وتغيير لونه):<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 158: | سطر 154: | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/width/ صفحة | * [http://api.jquery.com/width/ صفحة التابع width()في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery CSS]] | [[تصنيف:jQuery CSS]] | ||
المراجعة الحالية بتاريخ 10:40، 26 يونيو 2018
إعادة العرض الحالي المحسوب للعنصر الأول من مجموعة العناصر المُطابقة، أو ضبط عرض CSS لكل عنصر في مجموعة العناصر المُطابقة.
.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>