یکی از قابلیت های خوب جاوا اسکریپت (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 و به درستی جایگزین کنید.
آخرین ویرایش: