بازگشت به دوره

کار با CSS در جاوا اسکریپت

پیش از این تمام تعاملات ما با صفحات وب، صرفاً به کدهای HTML صفحات مربوط می‌شد. اما همانطور که می‌دانید CSS نیز بخش مهم دیگری از صفحات وب است. در بخش آخر این فصل قصد داریم تا به بررسی برخی از امکانات جاوا اسکریپت در رابطه با CSS بپردازیم.

 

خاصیت style

تمام عناصر درخت DOM (گره‌های از نوع Element) خاصیتی به نام style دارند. با استفاده از این خاصیت می‌توان تمام ویژگی‌های CSS عناصر را تغییر داد. در واقع خاصیت style یک شئ است که به ازای هر یک از ویژگی‌های موجود در CSS یک خاصیت دارد. مثلاً برای تغییر ویژگی‌های color و font-family یک عنصر می‌توان از دستورات زیر استفاده کرد.


const ul = document.querySelector('ul');
ul.style.color = 'red';
ul.style.fontFamily = 'Arial'

به نحوه‌ی تغییر نام ویژگی font-family توجه کنید. در CSS تعداد زیادی ویژگی وجود دارد که از چند کلمه تشکیل شده‌اند و برای جداسازی این کلمات از خط تیره استفاده می‌شود. اما با توجه به این که این کاراکتر در نامگذاری شناسه‌ها در جاوا اسکریپت غیر مجاز است. مانند مثال فوق، برای استفاده از این ویژگی‌ها باید خط تیره را حذف کرده و حرف اول کلمات (به جز کلمه‌ی اول) را به حروف بزرگ تبدیل کرد. بنابراین به جای font-family باید از fontFamily استفاده کرد.

البته در جاوا اسکریپت می‌توان در خاصیت‌های اشیاء از شناسه‌های غیر مجاز نیز استفاده کرد. در این صورت برای دسترسی به این خاصیت‌ها، به جای نقطه باید از براکت استفاده کرد. البته این روش معمولاً به کار نمی‌رود، اما امکان استفاده از آن وجود دارد. مثلاً در قطعه کد زیر ویژگی‌های background-color و font-size با این روش تغییر می‌کنند.


ul.style['background-color']= 'black';
ul.style['font-size'] = '24px';
مثال‌های فوق را می‌توانید اینجا در CodePen اجرا کنید. می‌دانیم که در CSS به ۳ روش می‌توان سبک‌های نمایشی را به عناصر صفحه اعمال کرد. این روش‌ها عبارتند از :

در اکثر مواقع طراحان وب روش اول، یعنی استفاده از فایل CSS خارجی را ترجیح می‌دهند. روش دوم نیز در برخی مواقع مورد استفاده قرار می‌گیرد. اما روش سوم کاربرد بسیار کمی داشته و به ندرت مورد استفاده قرار می‌گیرد.

لازم به یادآوری است که در هر لحظه فقط یک مقدار را می‌توان به یک ویژگی خاص اعمال کرد. مثلاً اگر ویژگی color برای یک عنصر خاص در فایل CSS خارجی برابر با "red" و در تگ <style> برابر با "blue" باشد، با توجه به قوانین CSS مقداری که دارای اولویت (Specificity) بیشتری است به عنصر مورد نظر اعمال می‌شود. در صورت برابری اولویت‌ها نیز، مقداری که دیرتر تعریف شده است اعمال خواهد شد.

در CSS ویژگی‌هایی که در صفت style به عناصر اعمال می‌شوند دارای بالاترین اولویت هستند و به همین دلیل این ویژگی‌ها در تگ <style> و یا فایل‌های CSS خارجی قابل تغییر نخواهند بود.

اما چرا این توضیحات در مورد قوانین CSS ارائه شد؟ به این دلیل که ویژگی‌هایی که از طریق خاصیت style به عناصر اعمال می‌شوند، در صفت style عناصر قرار می‌گیرند. یعنی با این روش فقط می‌توان ویژگی‌های CSS را به صورت Inline در صفت style عناصر قرار داد.

اگر با CSS آشنایی کافی داشته باشید، می‌دانید که مقداردهی ویژگی‌ها به صورت Inline، بدترین روش ممکن برای اعمال سبک‌های CSS است و می‌تواند مشکلات زیادی را در طراحی به وجود آورد. پس نباید برای تغییر ویژگی‌های CSS عناصر از خاصیت style آنها استفاده کرد. مگر در شرایطی که کاملاً از پیامدهای آن آگاه باشیم. اما روش صحیح برای مقداردهی ویژگی‌های CSS در جاوا اسکریپت چیست؟

معمولاً بهترین روش برای مقداردهی ویژگی‌های CSS عناصر، استفاده از خاصیت classList است که قبلاً با آن آشنا شدیم. با استفاده از این خاصیت و متدهای آن می‌توان کلاس‌های موجود در صفت class را حذف کرد و یا مواردی را به آن اضافه کرد. به عنوان مثال کدهای HTML و CSS زیر را در نظر بگیرید.


<h1>List of fruits</h1>
<ul class="blue">
	<li>Apple</li>
	<li>Orange</li>
	<li>Banana</li>
	<li>Cherry</li>
</ul>


.red{
  color:red;
}
.blue{
  color:blue;
}

با توجه به کدهای فوق، رنگ متن داخل تگ <ul> در ابتدا آبی (blue) خواهد بود. حال برای تغییر آن به رنگ قرمز، می‌توان کلاس red را به صفت class این عنصر اضافه کرد و کلاس blue را از آن حذف کرد. برای این کار می‌توان از خاصیت classList و متدهای add و remove به صورت زیر استفاده کرد.


const ul = document.querySelector('ul');
ul.classList.add('red');
ul.classList.remove('blue');
توجه کنید که ترتیب استفاده از متدهای add و remove تاثیری در نتیحه نهایی ندارد. این مثال را می‌توانید اینجا اجرا کنید.  

تابع getComputedStyle

با استفاده از خاصیت style علاوه بر این که می‌توان ویژگی‌های CSS عناصر را تغییر داد، می‌توان مقدار این ویژگی‌ها را نیز به دست آورد. اما دیدیم که سبک‌های اعمال شده با این خاصیت، به صورت Inline به صفت style عناصر اعمال می‌شوند. به همین دلیل، از این خاصیت فقط می‌توان برای خواندن ویژگی‌هایی که به صورت Inline به عناصر اعمال شده‌اند استفاده کرد. مثلاً در مثال قبلی استفاده از دستور زیر مقدار تهی را بازمی‌گرداند.


console.log(ul.style.color);
← ""

زیرا ویژگی color از طریق یک فایل CSS خارجی اعمال شده است و به صورت Inline تعریف نشده است.

برای خواندن مقدار ویژگی‌هایی که به صورت Inline تعریف نشده‌اند، می‌توان از تابع getComputedStyle استفاده کرد. این متد یک عنصر را به عنوان ورودی دریافت کرده و یک شئ از نوع CSSStyleDeclaration بازمی‌گرداند. این شئ دارای متدهای زیادی است. اما مهمترین متد آن getPropertyValue است که نام یک ویژگی را دریافت می‌کند و مقدار آن را بازمی‌گرداند. مثلاً برای خواندن مقدار ویژگی color در مثال قبلی می‌توان از دستورات زیر استفاده کرد.


const ul = document.querySelector('ul');
const styles = getComputedStyle(ul);
console.log(styles.getPropertyValue('color'));
← "rgb(255, 0, 0)"

به رشته‌ای که توسط متد getPropertyValue بازگردانده شده است توجه کنید. برخی ویژگی‌های CSS را به روش‌های مختلف می‌توان مقداردهی کرد. اما مقداری که با متد getPropertyValue بازگردانده می‌شود، همیشه دارای یک قالب مشخص است. در این مثال می‌بینید که مقدار ویژگی color با نام یک رنگ (red) مقداردهی شده است. اما مقداری که متد getPropertyValue بازمی‌گرداند، معادل RGB این رنگ را نشان می‌دهد. همچنین اندازه‌هایی که این متد بازمی‌گرداند همیشه بر حسب پیکسل (px) هستند. حتی اگر مقدار یک ویژگی را با واحدهایی مانند pt ، em و ... تعیین کرده باشید. این متد همیشه معادل آن را به پیکسل باز می‌گرداند.

نکته‌ی مهم در مورد تابع getComputedStyle این است که با استفاده از این تابع می‌توان مقدار ویژگی‌هایی که به صورت ضمنی توسط مرورگر تعیین شده‌اند را نیز به دست آورد. این قابلیت اهمیت بسیار بالایی دارد. زیرا هر یک از عناصر صفحه‌ی وب دارای صدها ویژگی مختلف در CSS هستند که معمولاً کمتر از ۱۰ مورد از این ویژگی‌ها توسط طراح صفحه‌ی وب مقداردهی می‌شوند و سایر موارد به صورت ضمنی توسط مرورگر تعیین می‌شوند (یا از عناصر والد به ارث می‌رسند). مثلاً می‌دانیم که به صورت پیش‌فرض رنگ پس‌زمینه‌ی صفحات وب سفید و رنگ متن سیاه است. این ویژگی‌ها توسط مرورگر به صورت ضمنی تعیین می‌شوند و تا زمانی که توسط طراح تغییر داده نشوند، همین مقادیر پیش‌فرض را حفظ می‌کنند. با استفاده از تابع getComputedStyle و متد getPropertyValue می‌توان این مقادیر ضمنی را نیز به دست آورد. مثلاً با دستورات زیر می‌توان مقدار ویژگی font-size را برای عنصر <ul> به دست آورد. توجه کنید که این ویژگی در CSS مقداردهی نشده است.


const ul = document.querySelector('ul');
const styles = getComputedStyle(ul);
console.log(styles.getPropertyValue('font-size'));
← "16px"
این مثال‌ها را نیز می‌توانید اینجا اجرا کنید.