attr کوتاه شده attribute یعنی آن هم ویژگی هایی که در تگ های HTML نوشته می می شود, می باشد. مثل ویژگی href.

فرض کنید ویژگی به نام X جهت یک عنصر وجود داشته باشد, حال attr(X) مقدار ویژگی X را بر می گرداند. و همچنین در صورتی که هم آن ویژگی خالی باشد و همچنین مقدار نداشته باشد یک رشته خالی برگردانده می می شود.

بهتر می باشد بدانید که در HTML5 به غیر از ویژگی های مخصوص خود عناصر مثل href جهت تگ a می قدرت ویژگی هایی تحت عنوان data attributes جهت عناصر تعریف کرد. که کافی می باشد نام انتخابی را بعد از -data قرار دهید.

در مثال زیر ویژگی به نام test را بر روی عنصر div مشخص کردن می کنیم و همچنین مقدار css-tricks.ir را به آن هم می دهیم:

<div data-test="CSS-Tricks.ir">I Love </div>

حال می قدرت آن مقدار را جهت ویژگی content شبه عنصر after:: بصورت زیر بهره بری و استفاده کرد:

div::after 
content: attr(data-test);

همانطور که دیدن می کنید مقدار ویژگی test به بعد از محتوای div چسبانده شده می باشد:

یکی از کاربردهای خوب آن تابع زمانی می باشد که می خواهیم جهت print طراحی کنیم. از آنجا که در زمان چاپ صفحه وب روی کاغذ آدرس لینک ها دیده نمی می شود معمولا از آن تابع جهت اضافه کردن آدرس لینک به بعد از محتوای تگ a بهره بری و استفاده می می شود. کافی می باشد بصورت زیر عمل کنیم:

@media print 
a::after 
content: attr(href);

حال زیرا و به درستی که می خواهیم آن اتفاق تنها و فقط جهت تگ های a که شامل ویژگی href خواهند بود بیافتد و همچنین همینطور جهت خوانایی بهتر محتوای لینک داخل پرانتز باشد و همچنین یک تک فاصله از محتوای تگ داشته باشد, بصورت زیر عمل می کنیم:

@media print 
a[href]::after 
content: " (" attr(href)")";

دموی زیر را بررسی کردن کنید:

See the Pen attr by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی نرم افزار مرورگر اینترنتی ها

تابع attr در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.