parsgreen.com
article

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

javascript-font-resize

یکی از قابلیت های خوب جاوا اسکریپت (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>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت
» ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور
» ساخت پنل چند سربرگی (tabbed panel) با جاوا اسکریپت و CSS
commentنظرات (۱۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: S
زمان: ۱۹:۴۷:۲۷ - تاریخ: ۱۳۹۱/۱۲/۲۱
بابا ایول.....ممنونممممممممم
نویسنده: ابوالفضل
زمان: ۱۳:۴۴:۵۷ - تاریخ: ۱۳۹۲/۰۵/۲۲
خوب بود
نویسنده: elham
زمان: ۱۲:۳۶:۵۴ - تاریخ: ۱۳۹۲/۱۱/۰۴
سلام
واقعاً دوست دارم
ایشاالله خدا بهت عمر طولانی بده دادا
منو که از دست استاد پایان نامه خلاص کردی !!!!!!!
فقط با مطالب شما پیش رفتم
واقعاً دعات میکنم
پاسخ: 
سلام
تشکر :-)
نویسنده: حسین
زمان: ۱۴:۳۹:۰۷ - تاریخ: ۱۳۹۲/۱۲/۲۵
دمت گرم خیلی خوب توضیح دادین
ادامه بدین
موفق باشین
نویسنده: حسین
زمان: ۲۱:۳۸:۲۵ - تاریخ: ۱۳۹۲/۱۲/۲۵
وقتی میذارم تو ابتدای قالب وبلاگم در میهن بلاگ فقط همون قسمت rss و یا عنوان رو بزرگ میکنه.
کد اول هم که میزارم همه چیز رو درشت میکنه الا متن اصلی رو.
چی کار کنم؟
پاسخ: 
کد اول به صورت پیش فرض فونت تگ های p را تغییر می دهد، می توانید به جای تگ p از div استفاده کنید:
 var p = document.getElementsByTagName('div');
نکته: تگ های موجود در صفحه نباید کلاس و استایل CSS اختصاصی داشته باشند، در این صورت کار کمی مشکل و توضیح آن سخت می شود!
نویسنده: حسین
زمان: ۱۱:۴۰:۳۷ - تاریخ: ۱۳۹۲/۱۲/۲۹
ایا میشه که برای هر استایلی که در قالب وجود داره یک جاوا اسکرایپت مجزا گذاشت. مثلا کد بالا رو بزاریم تو استایل قسمت نظرت یا متن اصلی و........
پاسخ: 
برای این کار باید با برنامه نویسی وب آشنا باشید، اگر در وبلاگ این کار را می خواهید انجام دهید، باید از id مخصوص بلاک مربوطه استفاده کنید، به فرض بخش نظرات در بلاک div مخصوصی خروجی داده می شود، کد جاوا اسکریپتتان باید از id آن بلاک استفاده کند، اگر هم با PHP کار می کنید، اعمال این موارد ساده است، کافی است متناسب با هر صفحه، خروجی خاص آن را چاپ کنید.
نویسنده: مونا
زمان: ۱۹:۱۳:۰۲ - تاریخ: ۱۳۹۳/۰۳/۱۱
سلام خسته نباشید ....
من میخوام یک فرم ثبت نام درست کنم .. امکانش هست آموزش فرم با جاوا اسکریپت هم توضیح دهید
با تشکر فراوان
پاسخ: 
سلام
برای ایجاد فرم ثبت نام باید با PHP آشنا باشید، جاوا اسکریپت صرفا می تواند در اعتبار سنجی سمت کاربر کاربرد داشته باشد.
نویسنده: مترسک
زمان: ۱۲:۵۲:۵۴ - تاریخ: ۱۳۹۳/۰۶/۱۷
سلام ممنون بابت توضیح تون من یک سوال دارم
چطوري كاري كنم كه وقتي موس رو بردم روي يه لينك، لينك رنگش عوض بشه مثلا رنگ لينك سياه باشه ولي با رفتن موس روي لينك رنگش قرمز یا سفید بشه؟
از قالب وطن اسکین هم استفاده میکنم.
پاسخ: 
سلام
باید با CSS و نحوه استفاده از سلکتور a و a:hover آشنا باشید، لطفا در این رابطه در وب جستجو کنید.
نویسنده: مهدی
زمان: ۱۱:۲۸:۱۳ - تاریخ: ۱۳۹۴/۰۵/۱۵
با سلام و خسته نباشید
واقعا مطالب خوبیه
فقط یه سوال!
همون طور که در نظرات هم گفته بودید اگه از css استفاده شده باشه یه کم کدنویسیش سخته!
اگه ممکنه یه توضیح برای این هم بدین و همینطور برای px ها به جای em
با سپاس
پاسخ: 
سلام
در آموزش سعی شده هم از روش px و هم em استفاده شود که در واقع فرق خاصی به لحاظ خروجی نهایی ندارند و تنها متدها متفاوت است، به عبارتی در صورت آشنایی با جاوا اسکریپت، به راحتی می توان حالت اول (که از px استفاده شده) را برای حالت دوم نیز تنظیم کرد و بر عکس (البته قاعدتا باید با مفهوم دستورات و نحوه کدنویسی آشنا باشید)، در مورد بخش دوم سوال، می توانید یک ID به عنصر مورد نظر نسبت دهید و با الگوبرداری از نمونه کد زیر، توابع آموزش داده شده را متناسب با نیاز خود تغییر دهید:
<span id="span">Your Span Tag</span>
<script type="text/javascript">
var span = document.getElementById("span");
span.style.fontSize = "25px";
</script>
نویسنده: melody
زمان: ۱۳:۵۹:۰۵ - تاریخ: ۱۳۹۵/۰۸/۰۹
سلام میشه بگید چطوری پوشه فونت اسکریپتو تبدیل به فونت فارسی کنم
فرمت های موجود فونت در پوشه اینا هستن
svg
eot
woff
ttf
woff2
پاسخ: 
لطفا عبارت "نحوه استفاده از فونت فارسی در وب با CSS" را جستجو نمائید، پس از آشنایی با این مسئله باید فونت های خود را با همان نام، جایگزین فونت های موجود کنید (البته معمولا امکان تغییر نام نیز وجود خواهد داشت، منتها باید کل اسکریپت جستجو و عبارت فونت قبلی با مقدار جدید جایگزین شود).




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

1 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...