التابع .css() في jQuery
يُستخدَم التابع .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> عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css مثال عن التابع</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "لون عنصر div <span style='color:" +
color + ";'>" + color + "</span>." );
});
</script>
</body>
</html>
الحصول على العرض، والارتفاع، ولون النص، ولون الخلفيّة لعنصر <div> عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css مثال عن التابع</title>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);
background-color: rgb(15, 99, 30);
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="result"> </p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$( "div" ).click(function() {
var html = [ "يمتلك عنصر div الذي ضغطت عليه التنسيقات التالية:" ];
var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>
.css( propertyName, value )
القيمة المعادة
كائن jQuery.
الوصف
تعيين واحدة أو أكثر من خاصيّات CSS لمجموعة العناصر المُطابِقة.
.css( propertyName, value )
أضيفت في الإصدار: 1.0.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
value
سلسلة نصيّة أو عدد، وتُمثِّل القيمة المطلوب تعيينها لخاصيّة CSS.
.css( propertyName, function )
أضيفت في الإصدار: 1.4.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
function
دالة على الشكل Function( Integer index, String value )، تُعيد سلسلة نصيّة أو عدد، وتُمثِّل دالة تُعيد القيمة المطلوب تعيينها، يُشير this إلى العنصر الحالي. تستقبل هذه الدالة موقع فهرس العنصر في المجموعة والقيمة السّابقة كوسائط لها.
.css( properties )
أضيفت في الإصدار: 1.0.
properties
كائن مُجرَّد (Plain Object)، ويُمثِّل أزواج من خاصيّة-قيمة المطلوب تعيينها.
يُسرِّع ويُسهِّل التّابع .css() من تعيين خاصيّات العناصر، كما هو الحال مع التّابع .prop(). يُمكِن للتّابع .css() أن يأخذ إمّا اسم الخاصيّة وقيمتها كمُعامِلات منفصلة، أو كائن مُفرد من أزواج خاصيّة-قيمة.
تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات التي يتألف اسمها من كلمات متعدّدة، فعلى سبيل المثال تفهم jQuery وتُعيد القيمة الصحيحة لـ .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) و .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). لاحظ أنّه في DOM تكون علامات الاقتباس حول اسم الخاصيّة اختياريّة، أما في CSS فهي إجباريّة نظرًا لوجود الشَّرْطَة (hyphen) في اسم الخاصيّة.
عند تمرير عدد كقيمة، ستُحوِّله jQuery إلى سلسلة نصيّة وتُضيف px إلى نهاية هذه السّلسلة. وإن كانت الخاصيّة تحتاج إلى واحدات أخرى مختلفة عن px، فستُحوِّل القيمة إلى سلسلة نصيّة وتُضيف الواحدة المناسبة قبل استدعاء التّابع.
عند استخدام التّابع .css() للتعيين، تُعدِّل jQuery خاصيّة تنسيق العنصر style، فمثلًا تكون $( "#mydiv" ).css( "color", "green" ) مُكافِئة لـِ document.getElementById( "mydiv" ).style.color = "green". يُؤدّي تعيين قيمة خاصيّة التنسيق إلى سلسلة نصيّة فارغة (مثل $( "#mydiv" ).css( "color", "" )) إلى إزالة تلك الخاصيّة من العنصر إن كانت مُطبّقة عليه مُسبقًا، سواءً كانت مُطبّقة عن طريق خاصيّة تنسيق HTML، أو عبر التّابع .css() في jQuery، أو عبر التعديل المباشر في DOM للخاصيّة style. وكنتيجة لذلك سيُسترجَع تنسيق العنصر بالنسبة لتلك الخاصيّة إلى القيمة التي كانت مُطبّقة، لذلك يُمكِن استخدام هذا التّابع لإلغاء أي تعديلات على التنسيق قُمنا بها مُسبقًا، وعلى الرغم من ذلك لا يُزيل التنسيق المُطبَّق بواسطة قواعد CSS الموجودة في ملفّات تنسيق CSS أو عبر العنصر <style>.
تحذير: من الاستثناءات الملاحظة أنّه في متصفّح Internet Explorer الإصدار 8 فما دون، تُؤدّي إزالة الخاصيّات المكتوبة بالشكل المُختصَر مثل border أو background إلى إزالة تنسيق تلك الخاصيّة تمامًا من العنصر بغض النظر عمّا هو مُحدَّد في ملف تنسيقات CSS أو في العنصر <style>.
ملاحظة: يتجاهل التّابع .css() التصريح !important، لذا لا تقلب الشيفرة $( "p" ).css( "color", "red !important" ) لون جميع الفقرات في الصفحة إلى الأحمر. يُنصَح باستخدام الأصناف بدلًا من ذلك، أو استخدام إضافة jQuery.
بدءًا من إصدار jQuery 1.8، يهتم التّابع .css() المُستخدَم للتعيين تلقائيًّا بوضع البادئة لأسماء الخاصيّات. فمثلًا عند كتابة .css( "user-select", "none" ) في متصفّحات Chrome و Safari، سيُعيّنها التّابع إلى -webkit-user-select، وفي Firefox سيستخدم -moz-user-select، وفي Internet Explorer 10 سيستخدم -ms-user-select.
أصبح التّابع .css() بدءًا من إصدار jQuery 1.6 يقبل القيم النسبيّة مثل التّابع .animate(). والقيم النسبيّة هي عبارة عن سلسلة نصيّة تبدأ بـ += أو -= لزيادة أو إنقاص القيمة الحاليّة. فمثلًا إن كانت قيمة الخاصيّة padding-left للعنصر هي 10px، فسينتج عن .css( "padding-left", "+=15" ) قيمة إجماليّة لهذه الخاصيّة وهي 25px.
يسمح لنا التّابع .css() بدءًا من إصدار jQuery 1.4 تمرير دالة كقيمة للخاصيّة:
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
يُعيِّن هذا المثال العرض للعناصر المُطابِقة إلى قيم أكبر تدريجيًّا.
ملاحظة: إن لم ترجع أي قيمة من دالة التعيين (أي function( index, style ){} )) أو عادت القيمة undefined، فلن تتغيّر القيمة الحاليّة للخاصيّة. يُفيد هذا في تعيين القيم انتقائيًّا عند تحقيق معايير مُحدَّدة فقط.