بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
اردیبهشت ۲۱, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
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 پشتیبانی می می شود.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0