الفرق بين المراجعتين ل"jQuery/css"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.css()</code> في jQuery}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.css()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.css()</code> في jQuery}}</noinclude> | ||
| + | يُستخدَم التابع <code>.css()</code> في الحصول على قيمة خاصيّة تنسيق محسوبة (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق. | ||
| + | |||
| + | == <code>.css( propertyName )</code> == | ||
| + | |||
| + | === القيمة المعادة === | ||
| + | [[JavaScript/String|سلسلة نصيّة]]. | ||
| + | |||
| + | === الوصف === | ||
| + | الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة. | ||
| + | |||
| + | === <code>.css( propertyName )</code> === | ||
| + | أضيفت في الإصدار: 1.0. | ||
| + | |||
| + | ==== <code>propertyName</code> ==== | ||
| + | [[JavaScript/String|سلسلة نصيّة]]، وتُمثِّل اسم خاصيّة CSS. | ||
| + | |||
| + | === <code>.css( propertyNames )</code> === | ||
| + | أضيفت في الإصدار: 1.9. | ||
| + | |||
| + | ==== <code>propertyNames</code> ==== | ||
| + | [[JavaScript/Array|مصفوفة]]، وتُمثِّل مصفوفة من خاصيّات CSS. | ||
| + | |||
| + | يُعد التابع <code>.css()</code> طريقة مثاليّة للحصول على خاصيّة تنسيق محسوبة للعنصر المُطابِق الأول، خاصّة في ضوء الطرق المختلفة التي تصل فيها المتصفحات لهذه الخاصيّات (التّابع <code>getComputedStyle()</code> وهو التّابع المعياري الذي تعتمد عليه المتصفحات، مقابل الخاصيّات <code>currentStyle</code> و <code>runtimeStyle</code> في متصفح Internet Explorer قبل الإصدار 9) والمصطلحات المختلفة التي تستخدمها المتصفحات لبعض الخاصيّات، على سبيل المثال يُشير تنفيذ DOM في متصفّح Internet Explorer إلى الخاصيّة <code>float</code> بالاسم <code>styleFloat</code>، بينما تُشير المتصفّحات المتوافقة مع معايير W3C إليها بالاسم <code>cssFloat</code>. تستطيع للسهولة أن تستخدم ببساطة <code>float</code>، وستترجمها jQuery إلى القيمة الصحيحة بالنسبة لكل متصفّح. | ||
| + | |||
| + | تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات مُتعدّدة الكلمات بشكلٍ متساوٍ، فعلى سبيل المثال تفهم وتُعيد jQuery القيمة الصحيحة لـ <code>.css( "background-color" )</code> و <code>.css( "backgroundColor" )</code>، ويعني هذا أنّ دمج حالة الأحرف يمتلك معنى مختلف لكل حالة، فلن يكون لـ <code>.css( "WiDtH" )</code> نفس فعل استخدام <code>.css( "width" )</code> مثلًا. | ||
| + | |||
| + | لاحظ أنّ التنسيق المحسوب للعنصر قد لا يكون مماثلًا للقيمة المُحدَّدة لهذا العنصر في ملف التنسيقات، فمثلًا تكون التنسيقات المحسوبة للأبعاد دومًا بالبكسل ولكن يُمكِن تحديدها في ملف التنسيقات بواحدات أخرى مثل <code>em</code>، و <code>ex</code>، و <code>px</code>، و <code>%</code>. قد تُعيد المتصفّحات المختلفة قيم ألوان CSS متساوية منطقيًّا ولكن غير متساوية نصيًّا، مثل <code>#FFF</code>، و <code>#ffffff</code>، و <code>rgb(255,255,255)</code>. | ||
| + | |||
| + | يكون استرجاع خاصيّات CSS المختصرة (مثل <code>margin</code>، و <code>background</code>، و <code>border</code>) غير مضمونًا مع أنّه فعّال في بعض المتصفّحات، فمثلًا إن أردنا استرجاع الخاصيّة <code>border-width</code> نستخدم <code>$( elem ).css( "borderTopWidth" )</code>، و <code>$( elem ).css( "borderBottomWidth" )</code>، وهكذا. | ||
| + | |||
| + | يجب أن يكون العنصر مُتصلًا بـ DOM عند استدعاء التّابع <code>.css()</code> عليه، وإن لم يكن كذلك فقد ترمي jQuery خطأً. | ||
| + | |||
| + | بدءًا من إصدار jQuery 1.9 أصبح تمرير مصفوفة من خاصيّات التنسيق إلى التّابع <code>.css()</code> ينتج عنه كائن من أزواج قيمة-خاصيّة، فمثلًا للحصول على قيم الحدود الأربعة للخاصيّة <code>border-width</code> بإمكاننا استخدام: <code>$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])</code> | ||
| + | |||
| + | === أمثلة === | ||
| + | الحصول على لون الخلفيّة لعنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> عند النقر عليه: | ||
مراجعة 03:00، 1 يونيو 2018
يُستخدَم التابع .css() في الحصول على قيمة خاصيّة تنسيق محسوبة (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق.
.css( propertyName )
القيمة المعادة
الوصف
الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة.
.css( propertyName )
أضيفت في الإصدار: 1.0.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
.css( propertyNames )
أضيفت في الإصدار: 1.9.
propertyNames
مصفوفة، وتُمثِّل مصفوفة من خاصيّات CSS.
يُعد التابع .css() طريقة مثاليّة للحصول على خاصيّة تنسيق محسوبة للعنصر المُطابِق الأول، خاصّة في ضوء الطرق المختلفة التي تصل فيها المتصفحات لهذه الخاصيّات (التّابع getComputedStyle() وهو التّابع المعياري الذي تعتمد عليه المتصفحات، مقابل الخاصيّات currentStyle و runtimeStyle في متصفح Internet Explorer قبل الإصدار 9) والمصطلحات المختلفة التي تستخدمها المتصفحات لبعض الخاصيّات، على سبيل المثال يُشير تنفيذ DOM في متصفّح Internet Explorer إلى الخاصيّة float بالاسم styleFloat، بينما تُشير المتصفّحات المتوافقة مع معايير W3C إليها بالاسم cssFloat. تستطيع للسهولة أن تستخدم ببساطة float، وستترجمها jQuery إلى القيمة الصحيحة بالنسبة لكل متصفّح.
تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات مُتعدّدة الكلمات بشكلٍ متساوٍ، فعلى سبيل المثال تفهم وتُعيد jQuery القيمة الصحيحة لـ .css( "background-color" ) و .css( "backgroundColor" )، ويعني هذا أنّ دمج حالة الأحرف يمتلك معنى مختلف لكل حالة، فلن يكون لـ .css( "WiDtH" ) نفس فعل استخدام .css( "width" ) مثلًا.
لاحظ أنّ التنسيق المحسوب للعنصر قد لا يكون مماثلًا للقيمة المُحدَّدة لهذا العنصر في ملف التنسيقات، فمثلًا تكون التنسيقات المحسوبة للأبعاد دومًا بالبكسل ولكن يُمكِن تحديدها في ملف التنسيقات بواحدات أخرى مثل em، و ex، و px، و %. قد تُعيد المتصفّحات المختلفة قيم ألوان CSS متساوية منطقيًّا ولكن غير متساوية نصيًّا، مثل #FFF، و #ffffff، و rgb(255,255,255).
يكون استرجاع خاصيّات CSS المختصرة (مثل margin، و background، و border) غير مضمونًا مع أنّه فعّال في بعض المتصفّحات، فمثلًا إن أردنا استرجاع الخاصيّة border-width نستخدم $( elem ).css( "borderTopWidth" )، و $( elem ).css( "borderBottomWidth" )، وهكذا.
يجب أن يكون العنصر مُتصلًا بـ DOM عند استدعاء التّابع .css() عليه، وإن لم يكن كذلك فقد ترمي jQuery خطأً.
بدءًا من إصدار jQuery 1.9 أصبح تمرير مصفوفة من خاصيّات التنسيق إلى التّابع .css() ينتج عنه كائن من أزواج قيمة-خاصيّة، فمثلًا للحصول على قيم الحدود الأربعة للخاصيّة border-width بإمكاننا استخدام: $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])
أمثلة
الحصول على لون الخلفيّة لعنصر <div> عند النقر عليه: