وب

کنترل اندازه فونت صفحه با جاوا اسکریپت

کنترل اندازه فونت صفحه با جاوا اسکریپت یکی از قابلیت های این زبان است. به طور کلی جاوا اسکریپت به شما این توانایی را می دهد که عناصر موجود در صفحه را بسیار راحت تر کنترل کنید. علاوه بر این شما می توانید این امکان را در سایت خود برای کاربران و مخاطبان خود نیز فراهم کنید تا بر روی بعضی از عناصر کنترل داشته باشند. برای مثال کنترل اندازه فونت صفحه با جاوا اسکریپت به کاربران شما اجازه می دهد اندازه فونت صفحه را در صورت نیاز تغییر دهند و از فونت با اندازه فونت مورد علاقه خود استفاده کنند. در این مقاله ما با استفاده از کد های جاوا اسکریپت نحوه انجام این کار را به شما آموزش خواهیم داد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

برای کنترل اندازه فونت صفحه با جاوا اسکریپت سه روش وجود دارد که ما هر سه را به شما آموزش خواهیم داد و شما می توانید به صورت دلخواه از هر یک از آن ها استفاده کنید.

روش اول برای کنترل اندازه فونت صفحه با جاوا اسکریپت:

در این روش ما از خاصیت style.fontsiz استفاده کرده ایم. ما برای این کار به سه تابع نیاز داریم که اندازه فونت را افزایش، کاهش و به حالت پیش فرض برگردانند. تگی که این تغییرات بر روی آن انجام می شود تگ p  است. در این روش فقط اندازه فونت در عنصر مورد نظر تغییر می کند.

برای شروع لازم است اسکریپت زیر را در میان تگ head قرار دهید:

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

در این جا ما از تابع increasefontsize و عنصر document.getElementsByTagName برای تعیین اندازه فونت p استفاده کرده ایم. اندازه فونت در این روش بر حسب px تنظیم می شود و فقط بر یک عنصر تاثیر می گذارد.

روش دوم کنترل اندازه فونت صفحه با جاوا اسکریپت

همانطور که گفته شد در روش اول تغییرات اندازه فونت فقط بر روی یک عنصر (p) صورت می گیرد. اما اگر بخواهید همه عناصر صفحه را تغییر دید باید از روش دوم استفاده کنید.

برای این کار لازم است ابتدا کد زیر را در head قرار دهید:

بعد از اینکار می توانید تابع را به صورت یک لینک متنی یا تصویری فرا بخوانید. برای این کار از کد زیر استفاده می کنیم:

همانطور که مشاهده می کنید body.style.fontsize  به ما اجازه می دهد که اندازه فونت را برای تگ  body مشخص کنیم. در اینجا برخلاف روش اول معیار اندازه گیری em است.

روش سوم کنترل اندازه فونت صفحه با جاوا اسکریپت

هر دو روش گفته شده در شرایط مختلف می توانند کاربردی باشند. اما روش سوم کمی هوشمندانه تر است. در این روش برای کنترل اندازه فونت صفحه با جاوا اسکریپت از کوکی ها استفاده می کنیم. این کار به این دلیل انجام می شود که کاربران مجبور نباشند در هر صفحه فونت مدنظر خود را تنظیم کنند. زمانی که از کوکی ها استفاده می کنیم تنظیمات کاربر در مرورگر ذخیره می شود به این ترتیب فقط کافی است یک بار اندازه فونت خود را تنظیم کند.

در این روش مانند روش دوم فونت کل صفحه تغییر می کند و اندازه ها بر حسب em در نظر گرفته می شود.

برای استفاده از این روش هم باید ابتدا یک اسکریپت را در head قرار دهید.

 

بعد از آن می توانید برای فراخواندن توابع از لینک های زیر استفاده کنید:

  جمع بندی

شما برای کنترل اندازه فونت صفحه با جاوا اسکریپت می توانید از هر کدام از روش های بالا استفاده کنید. فقط در انتخاب خود نحوه تاثیر گذاری آن ها و محل تاثیر گذاری را در نظر بگیرید. برای مثال روش اول می تواند برای متن یک مقاله در سایت مفید باشد و در روش دوم می توان کل سایت را در نظر گرفت.

علاوه بر این شما می توانید از کد زیر برای پیش نمایش نحوه عملکرد هر کدام از روش ها استفاده کنید.

 

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا