التابع `‎.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">&nbsp;</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">&nbsp;</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>