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

کنترل و تغییر انداز فونت در تگ p و div با جاوا اسکریپت

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

<script>
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 نیز انجام می شود با این تفاوت که مقدار در این تابع در حلقه for یک واحد کاهش می یابد.
- در تابع defultFontSize اندازه فونت پیش فرض به صورت 12 پیکسل تنظیم می شود که این مقدار با توجه به اندازه فونت پیش فرض صفحه می تواند بیشتر از 8 یا کمتر از 18 پیکسل باشد.
- همان طور که مشخص است این روش با پیکسل تنظیم شده است و مقادیر دیگر مانند em را تغییر نمی دهد (برای تغییر این موارد باید کل قسمت های مربوط به px را با em و به درستی جایگزین کنیم).

کنترل و تغییر انداز فونت در تگ body با جاوا اسکریپت

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

<script>
function resizeText(value){
    var body_font_size = document.body.style.fontSize;
    
    if(body_font_size == ''){
        body_font_size = '0.75em';
    }
    
    if(value == 0){
        document.body.style.fontSize = '0.75em';
    } else{
        document.body.style.fontSize = parseFloat(body_font_size) + (value * 0.2) + 'em';
    }
}
</script>

سپس تابع را به صورت لینک متنی یا در نظر گرفتن دکمه (Button) و رویداد onclick فراخوانی می کنیم:

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

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

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

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

<script>
function setFontSizeCookie(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 getFontSizeCookie(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(getFontSizeCookie("page_font_size") != null){
    document.write('<style>');
    document.write('body{');
    document.write('font-size:' + getFontSizeCookie("page_font_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'; setFontSizeCookie('page_font_size', '0.5', 30);">اندازه فونت کوچک</a>
<a href="#" onclick="javascript:body.style.fontSize='1em'; setFontSizeCookie('page_font_size', '1', 30);">اندازه فونت بزرگ</a>
<a href="#" onclick="javascript:body.style.fontSize='0.75em'; setFontSizeCookie('page_font_size', '0.75', 30);">اندازه فونت حالت پیش فرض</a>

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

پیش نمایش آنلاین کدهای تغییر دهنده اندازه فونت صفحه

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر اندازه فونت با جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
}
</style>
<script>
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>
function resizeText(value){
    var body_font_size = document.body.style.fontSize;
    
    if(body_font_size == ''){
        body_font_size = '0.75em';
    }
    
    if(value == 0){
        document.body.style.fontSize = '0.75em';
    } else{
        document.body.style.fontSize = parseFloat(body_font_size) + (value * 0.2) + 'em';
    }
}
</script>
<script>
function setFontSizeCookie(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 getFontSizeCookie(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(getFontSizeCookie("page_font_size") != null){
    document.write('<style>');
    document.write('body{');
    document.write('font-size:' + getFontSizeCookie("page_font_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>
<br><br>
<button type="button" onclick="resizeText(-1);">کاهش اندازه فونت</button>
<button type="button" onclick="resizeText(1);">افزایش اندازه فونت</button>
<button type="button" onclick="resizeText(0);">اندازه فونت پیش فرض</button>
<hr>
تغییر اندازه فونت - روش سوم:<br>
<a href="#" onclick="javascript:body.style.fontSize='0.65em'; setFontSizeCookie('page_font_size', '0.5', 30);">اندازه فونت کوچک</a> |
<a href="#" onclick="javascript:body.style.fontSize='1em'; setFontSizeCookie('page_font_size', '1', 30);">اندازه فونت بزرگ</a> |
<a href="#" onclick="javascript:body.style.fontSize='0.75em'; setFontSizeCookie('page_font_size', '0.75', 30);">اندازه فونت حالت پیش فرض</a>
<hr>
<p>نمونه متن در تگ p</p>
<hr>
برای بررسی تغییراتی که هر کدام از روش های بالا در خروجی HTML صفحه ایجاد می کنند می توانیم از امکان Developer Tools در مرورگرها استفاده کنیم، به طور مثال با زدن دکمه F12 در مرورگر فایرفاکس این امکان در دسترس است.
</body>
</html>

پیش نمایش آنلاین