تابع attr() در CSS به شما امکان میدهد مقدار یک ویژگی (attribute) از عناصر HTML را خوانده و در CSS استفاده کنید. این تابع در طراحی داینامیک و ایجاد استایلهای متغیر بسیار کاربردی است. برای آموزش کامل CSS و مثالهای عملی، حتماً به دوره آموزش CSS مراجعه کنید.
ساختار تابع attr()
ساختار کلی تابع attr() به صورت زیر است:
attr(attribute-name type-or-unit?)- attribute-name: نام ویژگی HTML که میخواهید مقدار آن را بخوانید.
- type-or-unit: واحدی که میخواهید مقدار به آن تبدیل شود (اختیاری).
مثال عملی تابع attr()
نمایش مقدار attribute در محتوای CSS:
<div class="box" data-size="150px"></div>
.box::after {
content: "Size: " attr(data-size);
}جدول ویژگیها و توضیحات
| ویژگی | توضیح |
|---|---|
| attribute-name | نام ویژگی HTML که میخواهید مقدار آن را در CSS استفاده کنید |
| type-or-unit | واحد مورد نظر برای تبدیل مقدار، اختیاری |
نکات مهم
- تابع attr() بیشتر برای pseudo-elements مثل ::before و ::after کاربرد دارد.
- پشتیبانی مرورگرها محدود است، مخصوصاً برای تبدیل مقادیر به واحدهای CSS.
- برای استایلدهی داینامیک و خواندن اطلاعات از HTML بسیار مفید است.
ادامه آموزش
برای یادگیری بیشتر CSS و مثالهای پیشرفتهتر، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش قدم به قدم توابع CSS
آموزش بعدی: آموزش تابع calc در CSS
دیدگاه و پرسش