()attr

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 چسبانده شده است:

 
استفاده از تابع attr در css
 

یکی از کاربردهای خوب این تابع زمانی است که می خواهیم برای 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 پشتیبانی می شود.

سوالت رو توی پنل بحث و گفتگو مطرح کن.

2 دیدگاه برای “()attr

  1. با تشکر از آقای سیدی
    چند وقت پیش تو سایت caniuse.com نوشته بود توسط هیچ مرورگری پشتیبانی نمیشه
    امتحانشم کردم ولی کار نکرد فک کنم منسوخ شده چون حدود دو سال قبل از این تو یکی از پروژه هام ازش استفاده کرده بودم و درست کار کرده بود

    به هر حال ممنون

    1. ممنون از پیامتون

      نه کی گفته منسوخ شده!؟ اتفاقا خیلی پشتیبانی خوبی هم داره. نه اونکه توی اون سایت هست مربوط به content نیست. چیزی بیشتر از اینا هست که هنوز پشتیبانی نمی کنن مرورگرها. فرق میکنه اون.

      از این استفاده کنید با خیال راحت :)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *