Javascript ile Font Boyutu Büyütme/Küçültme

Author: Kaan, Posted: 2010-12-05 01:12 GMT.

Javascript ile Font Boyutu B?y?tme/K???ltme

Genelde haber sitelerinde s?k?a g?rd???n?z, yaz? karakterlerinin dinamik olarak b?y?t?l?p k???lt?lme ?zelli?ine rastlam??s?n?zd?r.

T?m sayfadaki fontlar?n de?i?mesi ?ok anlaml? de?il.
Bu ?zellik genelde belirli bir alandaki k?s?m i?in eklenir.

?nce tetikleyecek k?sma bakal?m.

Kod:

?sterseniz bir imaj kullanarak estetik bir g?r?nt? sa?layabilirsiniz
verdi?im kod i?inde degistir isimli bir fonksiyon tetikleniyor.
2 Deger g?nderiliyor birincisi fontun de?i?mesini istedi?imiz alan?n id si.
Di?eride ne kadar de?i?im de?eridir
Bu de?erler + ve – olarak yer almaktad?r ve font b?y?kl???n? artt?rmak yada azaltmak i?in kullan?lacak.

Deneme i?in icerik id si olan k?s?m ??yle olabilir.

Kod:

<p id="icerik" style="font-size:12px;">
test test test test test<br>
sadece bu yaz? de?i?ecek<br>
</p>

?imdi javascript kodumuza gelelim.

ava]<script language="javascript">

function degistir(kaynak,deger) {

var hedef=document.getElementById(kaynak);

var hedeffont=parseInt(hedef.style.fontSize,10)

hedef.style.fontSize = (hedeffont+parseInt(deger,10)) + 'px';

}

</script>

3 ad?mdan olu?uyor.
1)De?i?tirmek istedi?imiz k?s?m? tan?ml?yoruz hedef de?i?kenine at?yoruz
2)De?i?tirmek istedi?imiz k?s?m?n font b?y?kl???n? rakamsal bir de?i?kene ?eviriyoruz
parseInt bu i?e yaramaktad?r.
3)De?i?tirmek istedi?imiz alan?n font b?y?kl??? ile bizim de?i?tirme oran?m?z? topluyoruz
e?er bu de?er eksi (-) ise k???lecek (dogal olarak ??karma i?lemi ger?ekle?ecek) e?er art? (+) ise artacakt?r.
Bburadaki parseInt kullanma sebebimiz fonksiyonu tetiklerken g?nderdi?imiz de?i?ken string olarak geldi?i i?in interger hale getirmek i?indir.

Test edilmi?tir.