İçeriğe geç

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

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.

 

Tarih:Webmaster

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir