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

آموزش برنامه نویسی و مهارتهای وب

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 -


یکشنبه 13 مهر 1393

نظرات ()


شنبه 1 مهر 1396 09:20 ب.ظ
Every weekend i used to pay a quick visit this web site, as i wish for enjoyment, since this this web
site conations genuinely fastidious funny material too.
یکشنبه 15 مرداد 1396 10:38 ب.ظ
Hello, I think your site might be having browser compatibility issues.
When I look at your website in Chrome, it looks fine but when opening in Internet
Explorer, it has some overlapping. I just wanted to give you a quick heads
up! Other then that, superb blog!
چهارشنبه 7 تیر 1396 09:22 ب.ظ
It's wonderful that you are getting ideas from this paragraph as well as from our dialogue made
here.
جمعه 8 اردیبهشت 1396 05:16 ق.ظ
First off I would like to say excellent blog! I had a quick question in which I'd like to ask if you
do not mind. I was interested to know how you center yourself and clear your thoughts prior to writing.
I have had a tough time clearing my mind in getting my ideas out there.

I truly do enjoy writing but it just seems like the
first 10 to 15 minutes are generally wasted simply just trying to figure out
how to begin. Any suggestions or hints? Kudos!
پنجشنبه 7 اردیبهشت 1396 05:54 ب.ظ
BHW
If some one needs to be updated with hottest technologies afterward he must be pay
a quick visit this site and be up to date every day.
چهارشنبه 23 فروردین 1396 02:40 ق.ظ
Hey There. I found your blog using msn. This is a really well written article.
I'll be sure to bookmark it and come back to read more of your
useful information. Thanks for the post. I'll
certainly return.
جمعه 11 فروردین 1396 12:01 ب.ظ
BHW
Hello, after reading this amazing paragraph i am as well glad to share my knowledge here with mates.

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )