jQuery .addClass() Metodu

jQuery addClass() metodu ile istenilen eleman ve elemanlara belirlediğimiz css sınıfını ekleme uygulamamız

".kutu" sınıflı "div" elementine ".yesil" css sınıfını eklyelim. Böylece, ".kutu" sınıflı elementin arkaplan rengi yeşil olmuş olacak.
Örnek 1 (jQuery)
        jQuery(document).ready(function () {
            //".kutu" sınıflı elemente tıklanıyor
            jQuery(".kutu").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery(".kutu").addClass("yesil");
            });
        });
Örnek 1 (Css)
        .kutu{width:50px;height:50px;background:blue;}
        .yesil{background:green;}
Örnek 1 (Elementler)
    <div class="kutu"></div>
Örnek 1

".kutu" sınıflı "div" elementine ".font-18" css sınıfını eklyelim .
Örnek 2 (jQuery)
        jQuery(document).ready(function () {
            //".kutu" sınıflı elemente tıklanıyor
            jQuery(".kutu").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery(".kutu").addClass("font-18");
            });
        });
Örnek 2 (Css)
        .kutu{width:200px;height:50px;background:red;color:#fff;}
        .font-18{font-size:18px;}
Örnek 2 (Elementler)
    <div class="kutu">ontedi.com</div>
Örnek 2
www.ontedi.com

".yazi" sınıflı "span" elementine ".font-22", ".renk-kirmizi", ".alti-cizili" css sınıflarını eklyelim .
Örnek 3 (jQuery) (Birden fazla sınıf ekleme)
        jQuery(document).ready(function () {
            //"span.yazi" sınıflı elemente tıklanıyor
            jQuery("span.yazi").click(function () {
                //".kutu" sınıflı elemente ".yesil" css sınıfı ekleniyor
                jQuery("span.yazi").addClass("font-22").addClass("renk-kirmizi").addClass("alti-cizili");
                //Diğer bir kullanım örneği
                jQuery("span.yazi").addClass("font-22 renk-kirmizi alti-cizili");
            });
        });
Örnek 3 (Css)
        .font-22{font-size:22px;}
        .renk-kirmizi{color:red;}
        .alti-cizili{text-decoration:underline;}
Örnek 3 (Elementler)
    <span class="yazi">ontedi.com</span>
Örnek 3
www.ontedi.com

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum