Bu yazımızda Html öğeleri üzerinde Css işlemlerimizi çok kolaylaştıran addClass, removeClass, toggleClass fonksiyonlarının ne işe yaradığını ve nasıl kullanabileceğimizi anlatacağım.
Şimdi sırasıyla bu fonksiyonların ne işe yaradığını ve nasıl kullanıldığını inceleyelim.
Daha sonra da tüm fonksiyonları aynı anda içeren bir uygulama yapalım. Böylece fonksiyonların birbirinden farkını daha iyi anlayabiliriz.
⇒ addClass Fonksiyonu : addClass() fonksiyonu ile seçtiğimiz Html öğesinin class attribute’una istediğimiz class isimlerini ekleyebiliriz.
⇒ removeClass Fonksiyonu : removeClass() fonksiyonu ile seçtiğimiz Html öğesinin class attribute’undan istediğimiz class isimlerini silebiliriz.
⇒ toggleClass Fonksiyonu : toggleClass() fonksiyonu ile seçtiğimiz Html öğesinin class attribute’undan istediğimiz class isimlerini varsa silebilir yoksa ekleyebiliriz.
Örneğimizde bir p etiketi tanımlayalım ve screen adında bir class oluşturalım.
addClass() fonksiyonu ile p etiketinin class attribute’una screen class’ını ekleyelim.
removeClass() fonksiyonu ile p etiketinin class attribute’undan screen class’ını silelim.
toggleClass() fonksiyonu ile her tıklamada p etiketinin class attribute’undan screen class’ını ekleyip silelim.
Artık bu fonksiyonları içerisinde barındıran uygulamamıza geçebiliriz.
Html Kodları
|
1 2 3 4 5 6 7 |
<button id="addClass">addClass()</button> <button id="removeClass">removeClass()</button> <button id="toggleClass">toggleClass()</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sapiente voluptatibus labore natus maiores minima doloremque quaerat qui necessitatibus laborum, sed rerum autem odio ut iste esse eum, debitis minus unde accusamus, ullam adipisci. </p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
body { margin: 20px; font-size: 18px; } button { width: 130px; padding: 10px; margin-right: 8px; margin-bottom: 8px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } p { font-size: 16px; } .screen { padding: 30px; text-indent: 35px; line-height: 25px; font-size: 18px; background-color: darkcyan; color: #fff; border-radius: 40px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function() { $("#addClass").click(function() { $("p").addClass("screen"); }); $("#removeClass").click(function() { $("p").removeClass("screen"); }); $("#toggleClass").click(function() { $("p").toggleClass("screen"); }); }); |
Tarayıcınızda sağ tıklayıp incele derseniz, Html öğeleri üzerindeki class değişikliklerini inceleyerek daha iyi anlayabilirsiniz.
Umarım “jQuery addClass(), removeClass(), toggleClass() Fonksiyonları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery text(), html(), val() Fonksiyonları ve Kullanımları
jQuery slideDown(), slideUp(), slideToggle() Fonksiyonları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
, removeClass(), toggleClass() Metodları ve Kullanımları){kind=link}