چگونه CSS Variables یا متغیرهای CSS را با Javascript تغییر دهیم؟



visibility  
mode_comment   ۰

چگونه CSS Variables یا متغیرهای CSS را با Javascript تغییر دهیم؟

در این مطلب قصد داریم با استفاده از Javascript متغیرهای CSS یا همون CSS Variables رو تغییر بدیم و بروز رسانی کنیم. متغیرهای CSS اخیرا به CSS اضافه شدند و با استفاده از اونا میتونین از قدرت متغیرها در CSS بهره ببرید و مقادیر رو یکبار تعریف کرده و در جاهای مختلف از اون استفاده کنید و با تغییر دادن یک متغیر، همه جاهایی که از اون استفاده کردید تغییر خواهند کرد.

قبل از اینکه متغیرهای CSS به وجود بیان، پیش پردازنده‌های زیادی مثل Sass یا Less و ... وجود داشتند که در اونا میتونستیم از قدرت برنامه‌نویسی و متغیرها و ... استفاده کنیم و در نهایت اون رو کامپایل کنیم و بصورت CSS در بیاریم و در مرورگر از اون استفاده کنیم.

تعریف کردن متغیرهای CSS

فرض کنید که یک div با کلاس mover در HTML قرار دادیم:

حالا فرض کنید که بخوایم این div رو بصورت دایره در بیاریم و با حرکت دادن ماوس بر روی صفحه، این دایره هم به همراه ماوس جابجا بشه و حرکت بکنه.

برای اینکار ابتدا متغیرهای CSS رو بصورت زیر تعریف میکنیم:

همونطور که میبینید این متغیرها رو درون :root قرار دادیم. :root ریشه همه انتخابگرها هست و زمانی که متغیری رو در اون تعریف میکنید در کل پروژه و Selector های دیگه میتونین از اون استفاده کنید. متغیرها با -- شروع میشن و مقداری رو برای اونا در نظر گرفتیم.

متغیر --mouse-x موقعیت افقی ماوس و متغیر --mouse-y موقعیت عمودی ماوس رو مشخص میکنه. در ابتدا مقدار هر دوی اونا 0 پیکسل هست که به معنای اینه که ماوس در ابتدا در بالا و سمت چپ مرورگر قرار دارد.

نحوه استفاده از متغیرهای CSS

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

همونطور که میبینید عرض و ارتفاع اون رو 50 پیکسل و اون رو بصورت دایره‌ای و قرمز رنگ قرار دادیم. برای ویژگی left از متغیر --mouse-x و برای ویژگی top از متغیر --mouse-y استفاده کردیم. همونطور که در بالا مشاهده کردید برای اینکه بتونین از متغیرهای CSS استفاده کنید باید از متد var استفاده کنید و نام متغیر مورد نظرتون رو در اون قرار بدین.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 23)

تا اینجای کار یک دایره قرمز رنگ در بالا و سمت چپ مرورگر قرار گرفته است.

برای اینکه بتونیم با تکان دادن ماوس، متغیرهای CSS رو بروز رسانی کنیم تا متعاقبا ویژگی‌های left و right مربوط به دایره قرمز رنگ تغییر کنه و جابجا بشه، باید از Javascript استفاده کنیم.

بروز رسانی متغیرهای CSS با Javascript

همونطور که میبینید یک رویداد mousemove تعریف کردیم و هر زمان که ماوس جابجا میشه، موقعیت افقی و عمودی اون که به ترتیب clientX و clientY هستند رو در متغیرهای xPosition و yPosition ذخیره میکنیم.

در نهایت با استفاده از متد setProperty این مقادیر رو به نام متغیرهای CSS نسبت میدیم تا مقدار اونا متناسب با موقعیت ماوس بروز رسانی بشه.

تا اینجای کار زمانی که ماوس رو تکان میدید، نوک ماوس در بالا و سمت چپ دایره قرار داره و خیلی جالب نیست. برای اینکه نوک ماوس در وسط دایره قرار داشته باشه میتونین کد بالا رو بصورت زیر تغییر بدین:

به همین راحتی.

خروجی رو میتونین در دموی زیر تست کنید:

نتیجه گیری

در این مطلب با استفاده از Javascript متغیرهای CSS رو به راحتی بروز رسانی کردیم و با استفاده از اون یک دایره قرمز رو با حرکت دادن ماوس حرکت دادیم.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.