کنترل اندازه فونت صفحه با جاوا اسکریپت یکی از قابلیت های این زبان است. به طور کلی جاوا اسکریپت به شما این توانایی را می دهد که عناصر موجود در صفحه را بسیار راحت تر کنترل کنید. علاوه بر این شما می توانید این امکان را در سایت خود برای کاربران و مخاطبان خود نیز فراهم کنید تا بر روی بعضی از عناصر کنترل داشته باشند. برای مثال کنترل اندازه فونت صفحه با جاوا اسکریپت به کاربران شما اجازه می دهد اندازه فونت صفحه را در صورت نیاز تغییر دهند و از فونت با اندازه فونت مورد علاقه خود استفاده کنند. در این مقاله ما با استفاده از کد های جاوا اسکریپت نحوه انجام این کار را به شما آموزش خواهیم داد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
برای کنترل اندازه فونت صفحه با جاوا اسکریپت سه روش وجود دارد که ما هر سه را به شما آموزش خواهیم داد و شما می توانید به صورت دلخواه از هر یک از آن ها استفاده کنید.
روش اول برای کنترل اندازه فونت صفحه با جاوا اسکریپت:
در این روش ما از خاصیت style.fontsiz استفاده کرده ایم. ما برای این کار به سه تابع نیاز داریم که اندازه فونت را افزایش، کاهش و به حالت پیش فرض برگردانند. تگی که این تغییرات بر روی آن انجام می شود تگ p است. در این روش فقط اندازه فونت در عنصر مورد نظر تغییر می کند.
آموزش پیشنهادی برای شما : آموزش جاوا اسکریپت از مقدماتی تا پیشرفته
برای شروع لازم است اسکریپت زیر را در میان تگ head قرار دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script type="text/javascript"> //<![CDATA[ var minsize=8; var maxsize=18; function increaseFontSize(){ var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=maxsize) { s += 1; } p[i].style.fontSize = s+"px" } } function decreaseFontSize() { var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=minsize) { s -= 1; } p[i].style.fontSize = s+"px" } } function defultFontSize() { var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=12) { s = 12; } p[i].style.fontSize = s+"px" } } //]]> </script> |
سپس باید مشخص کنید که کنترل اندازه فونت صفحه با جاوا اسکریپت بر چه محتوا ای اعمال شود. برای اعمال تغییرات می توانید هر یک از توابع زیر را برای محتوا با لینک فراخوانی کنید.
|
1 2 3 |
<a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a> <a href="javascript:increaseFontSize();">افزایش اندازه فونت</a> <a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a> |
در این جا ما از تابع increasefontsize و عنصر document.getElementsByTagName برای تعیین اندازه فونت p استفاده کرده ایم. اندازه فونت در این روش بر حسب px تنظیم می شود و فقط بر یک عنصر تاثیر می گذارد.
روش دوم کنترل اندازه فونت صفحه با جاوا اسکریپت
همانطور که گفته شد در روش اول تغییرات اندازه فونت فقط بر روی یک عنصر (p) صورت می گیرد. اما اگر بخواهید همه عناصر صفحه را تغییر دید باید از روش دوم استفاده کنید.
برای این کار لازم است ابتدا کد زیر را در head قرار دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> //<![CDATA[ function resizeText(value){ if (document.body.style.fontSize == "") { document.body.style.fontSize = "0.75em"; } if (value == 0){ document.body.style.fontSize = "0.75em"; } else{ document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (value * 0.2) + "em"; } } //]]> </script> |
بعد از اینکار می توانید تابع را به صورت یک لینک متنی یا تصویری فرا بخوانید. برای این کار از کد زیر استفاده می کنیم:
|
1 2 3 |
<a href="javascript:resizeText(-1);">کاهش اندازه فونت</a> <a href="javascript:resizeText(1);">افزایش اندازه فونت</a> <a href="javascript:resizeText(0);">اندازه فونت پیش فرض</a> |
همانطور که مشاهده می کنید body.style.fontsize به ما اجازه می دهد که اندازه فونت را برای تگ body مشخص کنیم. در اینجا برخلاف روش اول معیار اندازه گیری em است.
روش سوم کنترل اندازه فونت صفحه با جاوا اسکریپت
هر دو روش گفته شده در شرایط مختلف می توانند کاربردی باشند. اما روش سوم کمی هوشمندانه تر است. در این روش برای کنترل اندازه فونت صفحه با جاوا اسکریپت از کوکی ها استفاده می کنیم. این کار به این دلیل انجام می شود که کاربران مجبور نباشند در هر صفحه فونت مدنظر خود را تنظیم کنند. زمانی که از کوکی ها استفاده می کنیم تنظیمات کاربر در مرورگر ذخیره می شود به این ترتیب فقط کافی است یک بار اندازه فونت خود را تنظیم کند.
در این روش مانند روش دوم فونت کل صفحه تغییر می کند و اندازه ها بر حسب em در نظر گرفته می شود.
برای استفاده از این روش هم باید ابتدا یک اسکریپت را در head قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script language="javascript" type="text/javascript"> //<![CDATA[ function set_cookie(name,value,days) { if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function get_cookie(name) { var name_eq = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(name_eq) == 0) return c.substring(name_eq.length,c.length); } return null; } if(get_cookie("page_size") != null){ document.write('<style>'); document.write('body{'); document.write('font-size:'+ get_cookie("page_size") + 'em'); document.write('}'); document.write('</style>') }else{ document.write('<style>'); document.write('body{'); document.write('font-size: 0.75em'); document.write('}'); document.write('</style>') } //]]> </script> |
بعد از آن می توانید برای فراخواندن توابع از لینک های زیر استفاده کنید:
|
1 2 3 |
<a href="#" onclick="javascript:body.style.fontSize='0.65em'; set_cookie('page_size', '0.5', 30);">فونت ریز</a> <a href="#" onclick="javascript:body.style.fontSize='0.75em'; set_cookie('page_size', '0.75', 30);">فونت استاندارد</a> <a href="#" onclick="javascript:body.style.fontSize='1em'; set_cookie('page_size', '1', 30);">فونت درشت</a> |
جمع بندی
شما برای کنترل اندازه فونت صفحه با جاوا اسکریپت می توانید از هر کدام از روش های بالا استفاده کنید. فقط در انتخاب خود نحوه تاثیر گذاری آن ها و محل تاثیر گذاری را در نظر بگیرید. برای مثال روش اول می تواند برای متن یک مقاله در سایت مفید باشد و در روش دوم می توان کل سایت را در نظر گرفت.
علاوه بر این شما می توانید از کد زیر برای پیش نمایش نحوه عملکرد هر کدام از روش ها استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>وبگو | کنترل فونت با جاوا اسکریپت</title> <!-- https://webgoo.ir --> <style type="text/css"> body{ font-family:Tahoma, Geneva, sans-serif; font-size:12px; direction:rtl; } </style> <script type="text/javascript"> //<![CDATA[ var minsize=8; var maxsize=18; function increaseFontSize(){ var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=maxsize) { s += 1; } p[i].style.fontSize = s+"px" } } function decreaseFontSize() { var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=minsize) { s -= 1; } p[i].style.fontSize = s+"px" } } function defultFontSize() { var p = document.getElementsByTagName('p'); for(i=0;i<p.length;i++) { if(p[i].style.fontSize) { var s = parseInt(p[i].style.fontSize.replace("px","")); } else { var s = 12; } if(s!=12) { s = 12; } p[i].style.fontSize = s+"px" } } //]]> </script> <script type="text/javascript"> //<![CDATA[ function resizeText(value){ if (document.body.style.fontSize == "") { document.body.style.fontSize = "0.75em"; } if (value == 0){ document.body.style.fontSize = "0.75em"; } else{ document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (value * 0.2) + "em"; } } //]]> </script> <script language="javascript" type="text/javascript"> //<![CDATA[ function set_cookie(name,value,days) { if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function get_cookie(name) { var name_eq = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(name_eq) == 0) return c.substring(name_eq.length,c.length); } return null; } if(get_cookie("page_size") != null){ document.write('<style>'); document.write('body{'); document.write('font-size:'+ get_cookie("page_size") + 'em'); document.write('}'); document.write('</style>') }else{ document.write('<style>'); document.write('body{'); document.write('font-size: 0.75em'); document.write('}'); document.write('</style>') } //]]> </script> </head> <body> روش اول: <br /> <a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a> | <a href="javascript:increaseFontSize();">افزایش اندازه فونت</a> | <a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a> <hr /> روش دوم: <br /> <a href="javascript:resizeText(-1);">کاهش اندازه فونت</a> | <a href="javascript:resizeText(1);">افزایش اندازه فونت</a> | <a href="javascript:resizeText(0);">اندازه فونت پیش فرض</a> <hr /> روش سوم: <br /> <a href="#" onclick="javascript:body.style.fontSize='0.65em'; set_cookie('page_size', '0.5', 30);">فونت ریز</a> | <a href="#" onclick="javascript:body.style.fontSize='0.75em'; set_cookie('page_size', '0.75', 30);">فونت استاندارد</a> | <a href="#" onclick="javascript:body.style.fontSize='1em'; set_cookie('page_size', '1', 30);">فونت درشت</a> <hr /> <p>این یک پاراگراف است!</p> <noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript> </body> </html> |
منبع : طراحی سایت
