شرح الدالة attr() في Css

الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo

الدالة attr()

الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل.

/* استخدام بسيط */
attr(data-count);
attr(title);
/* تحديد نوع البيانات */
attr(srcurl);
attr(data-countnumber);
attr(data-widthpx);
/* توفير قيمة افتراضية */
attr(data-countnumber,0);
attr(srcurl,'');
attr(data-widthpx,inherit);
attr(data-something,'default');

لاحظ أنَّ الدالة attr()‎ يمكن استخدامها مع أيّ خاصية CSS، لكن دعم استخدامها مع جميع الخاصيات باستثناء content ما يزال تجريبيًا.

أمثلة

لاحظ كيف خزّنا السلسلة النصية hello في خاصية data-foo في العنصر <p>، وكيف استخدمناها مع العنصر الزائف ‎::before عبر الخاصية content:

<pdata-foo="hello">world</p>

شيفرة CSS:

p::before{
 content:attr(data-foo)" ";
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (content)	2.0	1.0	8.0	9.0	3.1
دعم بقية الخاصيات	غير مدعومة	غير مدعومة	غير مدعومة	غير مدعومة	غير مدعومة

البنية العامة

تقبل الدالة attr()‎ القيمة التالية.

attribute-name

اسم إحدى خاصيات HTML المرتبطة بالعنصر المُحدَّد.

البنية الرسمية

attr(<attr-name>)

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا