آموزش تغییر اندازه فونت صفحه با javascript

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

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

بدین منظور ابتدا کد زیر را در قسمت head صفحه کپی نمائید.

1.zip - 566 B

سپس برای فراخوانی آن، از لینک های زیر استفاده کنید.

2.zip - 313 B

توضیح:
- این کد نیز فونت کل صفحه را با استفاده از تگ body تغییر می دهد و از معیار em در آن استفاده شده است.
- به صورت پیش فرض، تا 30 روز تنظیمات کاربران در حافظه مرورگر آنها در کوکی، نگهداری می شود.
- مقادیر در نظر گرفته شده برای اندازه فونت در حالت های فونت ریز، استاندارد و درشت، دلخواه و قابل تغییر است، اما اگر با کدنویسی جاوا اسکریپت آشنایی ندارید، تغییر آنها توصیه نمی شود.
- دقت کنید که رویداد استفاده شده در اسکریپت های بالا، onclick (با کلیک کاربر) است، شما می توانید از رویدادهای دیگر در جاوا اسکریپت (مثل onload) نیز در موارد خاص و مورد نیاز استفاده کنید.

کد تکمیل شده

3.zip - 2 KB