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

 

 

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