این آموزش در تاریخ ۱۴۰۲/۰۶/۳۰ آپدیت شده است.
آموزش تابع attr در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع attr در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع attr در CSS
با استفاده از تابع attr در CSS میتوان مقدار صفت های ( Attributes ) یک یا چندین تگ رو بدست آورد، ( بطور کلی این تابع مقداری که برگشت میده در واقع مقدار صفت یک تگ می باشد )
| نسخه | CSS2 |
|---|
Free-Learn
مثال از تابع attr در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : بدست آوردن مقدار صفت href یک لینک
|
1 2 3 4 5 6 7 |
<style> a:after { content: " (" attr(href) ") "; } </style> |
مثال شماره ۲ : ساخت یک تولتیپ ( Tooltip ) ساده – استفاده از صفت مَن درآوردی ( یعنی صفتی که عشقی خودمون درست کردیم با مقدار ) وقتی ماوس بره روی یک متن، محتوای تولتیپ نمایش داده میشه.
|
1 2 3 |
span:after { content: attr(content_tooltip); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع attr در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()attr | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
attr( Attribute_Name ); |
Free-Learn
جدول مقادیر تابع attr در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Attribute_Name | ضروری – نام اون صفتی که قراره مقدارش برگشت داده شه |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
