Javascript ile Yazı Boyutunu Büyütüp Küçültme

on

Merhabalar, teknoloji sitelerinde sık sık rastladığımız özelliklerden olan yazı boyutunu büyütüp küçültme hakkında bu yazıda bilgi vereceğim. Javascript ve html ile bu işlemi yapacağız. İstediğimiz gibi şekillendirip düzenleyebiliriz. Ben en basit şekliyle göstereceğim.

İlk olarak aşağıdaki kodları göstermek istediğimiz yere ekliyoruz.

<a class="fontSizePlus" title="" href="#">Büyüt</a>
 
<a class="fontReset" href="#">Normal Boyut</a>
 
<a class="fontSizeMinus" href="#">Küçült</a>

Daha sonrası ise Javascript kodlarımızı temamıza ekliyoruz.

/* Document Ready Functions */
$(document).ready(function () {
var min = 9;
var max = 22;
var reset = $('#fontChange').css('fontSize');
var elm = $('#fontChange');
var size = str_replace(reset, 'px', '');
$('a.fontSizePlus').click(function () {
if (size &lt; max) { size++; elm.css({ 'fontSize': size }); } return false; }); $('a.fontSizeMinus').click(function () { if (size &gt; min) {
size--;
elm.css({ 'fontSize': size });
}
return false;
});
$('a.fontReset').click(function () {
size = str_replace(reset, 'px', '');
elm.css({ 'fontSize': reset });
});
});
function str_replace(haystack, needle, replacement) {
var splitString = haystack + '';
var temp = splitString.split(needle);
return temp.join(replacement);
}

Kendinize göre CSS ile düzenleyebilirsiniz.