آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 44) : متغیرهای CSS

آخرین مطالب

امکانات وب

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 44) : متغیرهای CSS - قسمت 3

0 33 ۲۳ خرداد ۹۶

css3 attributes

در جلسه گذشته در مورد تعریف و استفاده از متغیرهای CSS توضیحاتی داده شد و در مورد اولویت و ارث بری ویژگی ها نیز مثالهایی زده شد. در این جلسه قصد داریم نکات باقیمانده و ضروری در مورد متغیرهای CSS رو بیان کنیم و این موضوع رو به پایان برسونیم.

نکات تکمیلی در مورد تابع var

در جلسه گذشته دیدیم که چطور میتونیم با استفاده از تابع var به مقدار یک متغیر، دسترسی داشته باشیم. نکته ای که در مورد این تابع بیان نشد این هست که میتونیم پارامتر یا پارامترهای دیگه ای رو نیز به عنوان ورودی به این تابع ارسال کنیم. این موارد به نوعی پشتیبان هستن و در مواقعی که متغیر مورد نظر اشتباه آدرس دهی شده و یا اصلا تعریف نشده، بصورت اتوماتیک بجای مقدار قرار میگیرن. مقادیر پشتیبان میتونن با کاما از هم جدا بشن و خود تابع اونا رو بصورت یکی در میاره. مثلا کد var(--font-stack, "Helvetica Neue", "Helvetica", "Arial", "sans-serif"); بصورت var(--font-stack, "Helvetica Neue, Helvetica, Arial, sans-serif"); در میاد.

ما میتونیم مقادیر خلاصه نویسی شده رو بدون استفاده از کاما برای یک متغیر قرار بدیم. مثل خود CSS که میتونیم برای margin و padding بصورت خلاصه نویسی شده، فواصل چهار طرف رو بصورت یکجا تعریف کنیم، در اینجا هم میتونیم اینکار رو انجام بدیم. کد زیر رو در نظر بگیرید:

p {

padding: var(--pad, 10px 20px 10px)

}

میبینید که برای ویژگی padding، مقدار متغیر pad رو قرار دادیم. اما از اونجا که این متغیر رو از قبل تعریف نکردیم، خودمون یک مقدار پشتیبان بعد از کاما قرار میدیم و این مقدار مورد استفاده قرار میگیره. اگر یک تگ p رو در Inspect Element انتخاب کنید، CSS Box Model اون بصورت زیر میشه:

همونطور که در تصویر بالا هم میبینید، برای راست و چپ مقدار 20 و برای بالا و پایین مقدار 10 قرار داده شده است.

استفاده همزمان از توابع var و calc

تابع calc هم یکی دیگه از ویژگی های CSS3 هست که با استفاده از اون میتونیم بصورت مستقیم محاسبات مورد نظرمون رو در CSS انجام بدیم. بیاید فرض کنیم که میخوایم یک ضریب رو برای سایز فونت قرار بدیم. برای اینکار یک متغیر میسازیم، بصورت زیر:

:root {

--font-size-factor: 2.5;

}

میبینید که ضریب 2.5 رو برای این متغیر قرار دادیم. همونطور که مشاهده میکنید برای این مقدار، هیچ واحدی قرار نگرفته. بنظرتون چطور میتونیم از اون استفاده کنیم؟ شاید راه حل زیر بنظرتون برسه:

:root {

--font-size-factor: 2.5;

}

div > p {

font-size: var(--font-size-factor)em;

}

همونطور که میبینید به این ضریب با استفاده از var دسترسی پیدا کردیم و بعد از اون واحد em رو قرار دادیم. این کار معتبر نیست و در خروجی تاثیری نخواهد گذاشت. اینجا هست که میتونیم از تابع calc استفاده کنیم. برای اینکار بصورت زیر عمل میکنیم:

:root {

--font-size-factor: 2.5;

}

div > p {

font-size: calc( var(--font-size-factor) * 1em );

}

میبینید که درون تابع calc، مقدار این متغیر که 2.5 هست رو در 1em ضرب کردیم و با اینکار نتیجه 2.5em میشه. اگر خروجی رو در مرورگر ببینید، تغییرات رو خواهید دید.

دسترسی به متغیرهای CSS در Javascript

با استفاده از window.getComputedStyle() به راحتی میتونیم به ویژگی های CSS در کدهای Javascript دسترسی داشته باشیم. با این روش علاوه بر ویژگی ها، میتونیم به متغیرهای CSS نیز دسترسی داشته باشیم. فرض کنید که کد HTML زیر رو داریم:

This is sample text

</div>

کد CSS زیر رو برای اون اعمال میکنیم:

:root {

--color: red;

}

div {

color: var(--color);

}

همونطور که دیدید یک متغیر با نام --color تعریف کردیم و رنگ red رو درون اون قرار دادیم و بعد از اون با استفاده از تابع var به اون دسترسی پیدا کردیم و از اون برای رنگ متن div استفاده کردیم. اگر بخواهیم به این متغیر CSS و مقدارش دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

var alert = document.getElementById('alert');

var color = window.getComputedStyle(alert, null).getPropertyValue('--color').trim();

console.log(color);

همونطور که میبینید در خط 1 div مورد نظر با کلاس alert رو انتخاب کردیم و درون متغیر alert قرار دادیم. در خط 3 از متد getComputedStyle مربوط به شئ window استفاده کردیم تا بتونیم به همه استایلهای محاسبه و اعمال شده به المنت مورد نظرمون دسترسی پیدا کنیم. بعنوان ورودی اول این متد، نام همون المنت alert رو قرار میدیم تا اطلاعات مربوط به اون برگشت داده بشه. این متد یک object خیلی بزرگ رو برمیگردونه که همه استایلهای اعمال شده به این المنت رو در بر میگیره. میتونین از متد getPropertyValue استفاده کنید و فقط نام ویژگی یا متغیر CSS مورد نظرتون رو وارد کنید تا فقط مقدار همین مورد برای شما برگشت داده شود. در نهایت هم از trim استفاده شد تا فضای خالی قبل یا بعد از خروجی رو پاک کنه. در خط 5 نیز color رو درون Console چاپ کردیم و اگر خروجی رو در مرورگر ببینیم، مقدار red نمایش داده میشه.

فرض کنید که کد CSS بالا سر جای خودش باشه و حالا بخوایم یه دکمه اضافه کنیم و زمانی که بر روی اون کلیک شد، رنگ متن به سبز تغییر داده بشه. برای اینکار بصورت زیر عمل میکنیم:

This is sample text

</div>

<br>

<button id="changeColor">Change Color</button>

کد Javascript:

var alert = document.getElementById('alert'),

changeColorBtn = document.getElementById('changeColor');

changeColorBtn.addEventListener('click', function() {

alert.style.setProperty('--color', 'green');

}, false);

همونطور که میبینید یک رویداد برای دکمه مورد نظر تعریف کردیم و زمانی که این رویداد trigger بشه با استفاده از متد setProperty، متغیر --color برابر با green میشه و رنگ متن سبز خواهد شد. بهمین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 320 تاريخ : جمعه 26 خرداد 1396 ساعت: 14:26

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 44) : متغیرهای CSS - قسمت 3

آخرین مطالب

امکانات وب