JAVASCRİPT İLE CLASS EKLEME, ÇIKARMA, TOGGLE (CLASSLIST NESNESİ)

Javascript le bir elemenın tüm class'ları CLASSLIST nesnesine eklenir. Bu nesne üzerinde kullanacağımız metodarla , elemana yeni bir class ekleyebilir , bir class'ı çıkarabilir, yada iki işlemi kontrol edip aynı anda yapabiliriz (toogle).

CLASS EKLEME (add)

Bir elemena class eklemek için, classList nesnesinin add() metodu kullanılır. Örneğin "box" id'li bir div'e "green" class'ı ekleyelim.

<div id="box">

<script>
dom=document.getElementById("box");  // eleman seçimi dom değişkenine atanıyor..
dom.classList.add("green");   // add ile class ekleniyor
</script>

Script çalıştığında , div'e "green" classı eklenmiş olur.

<div id="box" class="green">

Elemana aynı anda birden fazla class ekleyebiliriz. Bunun için eklenecek class'lar add parantezinde virgül ile ayrılarak yazılır.

<script>
dom.classList.add("green","fs25","mt5");   // add ile 3 class ekleniyor...
<script>
// div'e 3 yeni class eklenmiş olur.

<div id="box"  class="green fs25 mt5"></div>

CLASS ÇIKARMA (remove)

Bir elemendan class çıkarmak için, classList nesnesinin remove() metodu kullanılır. Örneğin "box" id'li bir div'den "green" class'ını çıkaralım.

<div id="box" class="green">

<script>
dom=document.getElementById("box");  // eleman seçimi dom değişkenine atanıyor..
dom.classList.remove("green");   // remove ile class çıkarılıyor..
</script>

Script çalıştığında , div'deki "green" class'ı çıkarılmış olur.

<div id="box">

Elemandan aynı anda birden fazla class çıkarmak için "add" metodundaki yöntem kullanılır. Çıkarılmak istenen class'lar remove parantezinde virgül ile ayrılarak yazılırlar.

<div id="box" class="green fs25 mt5">

<script>
dom=document.getElementById("box");  // eleman seçimi dom değişkenine atanıyor..
dom.classList.remove("green","fs25");   // remove ile classlar çıkarılıyor.. (green ve fs25)
</script>


<div id="box" class=" mt5">
// sadec emt5 class'ı kalmış olur..

CLASS TOGGLE (Yoksa EKLE, Varsa ÇIKAR)

Eleman içeriisnde var olan classı çıarabilir yada yok ise ekleyebiliriz. Bu kontrol çin toogle() metdounu kullanıyoruz. Toggle ile belirttiğimiz class , eğer elemanın classLıst'inde bulunuyorsa çıkarılacak, bulunmuyorsa eklenecektir. Bir nevi aç kapa gibi düşünebilirsiniz.

<div id="box" class="mt5">

<script>
dom=document.getElementById("box");  // eleman seçimi dom değişkenine atanıyor..

dom.classList.toggle("green");   
// toggle ile "green" class'ı kontrol ediliyor... Classlist içinde olmadığı için ekleniyor..

dom.classList.toggle("mt5");   
// toggle ile "mt5" class'ı kontrol ediliyor... Classlist içinde olduğu için çıkarılıyor..

</script>


<div id="box" class="green">
// green class'ı başta olmadığı için eklendi , ama mt5 class'ı başta olduğu için çıkarıldı...

Son Güncelleme : 11 Şubat 2025 08:35, Salı

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK