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

تغییر انداز فونت با جاوا اسکریپت - روش اول
ساده ترین راه برای کنترل اندازه فونت مطالب و محتوای صفحه، استفاده از خاصیت style.fontSize است، به این منظور در کد زیر سه تابع تعریف شده است که هر کدام به ترتیب اندازه فونت را افزایش، کاهش و یا آن را به حالت پیش فرض تبدیل می کنند، در این توابع از تگ p (پاراگراف) به عنوان تگ مقصد استفاده شده است (مطابق با نیاز خود می توانید p را با مقادیر دیگر مثل div یا آی دی خاصی جایگزین نمائید)؛ برای استفاده از این کد، ابتدا اسکریپت زیر را بین تگ head کپی نمائید.

<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>

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

<a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>

برای دیدن پیش نمایش در انتهای همین مطلب بر روی لینک آن کلیک کنید.
توضیح:
- کد بالا در تابع increaseFontSize با عنصر document.getElementsByTagName مقدار فعلی اندازه تگ های p را دریافت می کند (به پیکسل) و آن را در یک حلقه for یک واحد افزایش می دهد.
- همین کار در تابع decreaseFontSize انجام می شود، با این تفاوت که مقادیر یک واحد کاهش می یابد.
- در تابع defultFontSize، اندازه فونت به 12 پیکسل تنظیم می شود (این مقدار با توجه به فونت پیش فرض شما، می تواند بیشتر از 8 یا کمتر از 18 باشد).
- این کد با پیکسل تنظیم شده است و مقادیر دیگر مثل em را تغییر نمی دهد (برای تغییر این موارد باید کل قسمتهای مربوط به px را با em و به درستی جایگزین کنید.

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


در روش بالا، تغییر اندازه فونت به صورت پیکسل و بر روی پاراگراف یا بلاک div قابل اعمال است، اما با کد زیر می توانید این کار را روی تمام عناصر موجود در تگ body انجام دهید، بدین منظور ابتدا کد زیر را در قسمت head صفحه کپی کنید.

<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>

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

<a href="javascript:resizeText(-1);">کاهش اندازه فونت</a>
<a href="javascript:resizeText(1);">افزایش اندازه فونت</a>
<a href="javascript:resizeText(0);">اندازه فونت پیش فرض</a>

برای دیدن پیش نمایش در انتهای همین مطلب بر روی لینک آن کلیک کنید.
توضیح:
- در این کد از body.style.fontSize استفاده کرده ایم تا مقادیر اندازه فونت را به تگ body در صفحه نسبت دهیم.
- این کد بر اساس معیار em اندازه فونت را تغییر می دهد و مقادیر پیش فرض 0.75em در نظر گرفته شده است که در واقع همان 12 پیکسل است (هر em برابر با 16 پیکسل است، لذا 12 تقسیم بر 16 می شود 0.75em).
- ساختار تابع کاملا روشن و ساده است، در قسمت دستور شرطی if اول، فونت پیش فرض با خاصیت document.body.style.fontSize برابر با 0.75em تعیین می شود، در دستور شرطی if دوم، مقادیر برای گزینه پیش فرض در نظر گرفته شده است و در قسمت else آخر، به صورت داینامیک مقدار فونت با هر کلیک کاربر کاهش یا افزایش می یابد.

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


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

<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>

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

<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>

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

پیش نمایش کدهای تغییر دهنده اندازه فونت


در صفحه زیر، تمام کدهای بالا را در یک مجموعه جهت تست قرار داده ایم که می توانید با استفاده از لینک زیر، آن را امتحان کنید.

<!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>
<!-- http://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>


1394/05/30 9:48:42 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما