Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery ile font büyütme ve küçültme işlemi

Merhaba arkadaşlar,

Bugün sizlere jquery ile yazı fontu büyütme ve küçültme işleminin nasıl yapılacağını anlatacağım. Bunun için öncelikle jquery kütüphanemizi yüklüyoruz. Ve aşağıdaki kodlarımızı yazıyoruz.


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $(".font-button").bind("click", function () {
                var size = parseInt($('.yazialan').css("font-size"));
                if ($(this).hasClass("plus")) {
                    size = size + 2;
					  if (size >= 20) {
                        size = 20;
                    }
									
                } 
				
				else {
                    size = size - 2;
                    if (size <= 10) {
                        size = 10;
                    }
					
					
                }
				
				
                $('.yazialan').css("font-size", size);
            });
        });
    </script>
 <a class="font-button plus">A+</a> <a class="font-button minus">A-</a>

 

 

Yukarıdaki kodumuzda metinlerimizin .yazialan ile belirttiğimiz class'ın içinde olması gerekmektedir. Fontların küçültülmesi ve büyütülmesinde istediğimiz sınırı koyabilmektiyiz. Size <=10 ile küçültme sınırımızı >=20 büyüklük sınırımızı koyduk. Sizde istediğiniz sınırları koyabilirsiniz veya bu sınırları kaldırıp sınırsız büyütme ve küçültme seçeneği ile kullanabilirsiniz.

 

İyi çalışmalar..

Sosyal Hesabında Paylaş

3752 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.