JavaScript classList Nedir?

JavaScript classList kullanımı, metodları, ekleme ve kaldırma işlemleri hakkında bilgi edinin. Sayfa ziyaretçileriniz için önemli bilgileri öğrenin.

classList Kullanımı

JavaScript classList özelliği, DOM düğümlerinin sınıflarını değiştirmek ve yönetmek için kullanılır. Bu özellik, belirli bir elementin sınıflarını kontrol etmek, eklemek, kaldırmak veya değiştirmek için kullanışlı metodlar içermektedir.

classList özelliği, className olarak adlandırılan eski sınıf özelliğine alternatif bir yaklaşım sunar. Bu özellik sayesinde sınıfların işlenmesi daha basit ve daha esnektir.

classList Kullanımı için genellikle add, remove ve toggle metotları kullanılır. Bunlar, sırasıyla bir sınıf ekler, bir sınıf kaldırır veya bir sınıfı varsa kaldırır yoksa ekler.

classList ayrıca contains metodu ile belirli bir sınıfın bir elementin sınıf listesinde olup olmadığını kontrol etme imkanı sağlar.

Bu metodları kullanarak, JavaScript ile elementlerin sınıflarını hızlı ve kolay bir şekilde yönetebiliriz.

classList Metodları

JavaScript’te classList, bir HTML elementinin sınıf listesini temsil eden ve sınıf eklemek, kaldırmak, değiştirmek ve sorgulamak için kullanılan bir özelliktir. Bu metodlar, DOM üzerinde sınıf işlemleri gerçekleştirmek için oldukça kullanışlıdır.

add metodu, bir elementin sınıf listesine yeni bir sınıf eklemek için kullanılır. Örneğin, element.classList.add(yeni-sinif) şeklinde kullanarak, belirtilen elemente yeni-sinif sınıfını ekleyebilirsiniz.

remove metodu, bir elementin sınıf listesinden belirtilen bir sınıfı kaldırmak için kullanılır. Örneğin, element.classList.remove(eski-sinif) şeklinde kullanarak, belirtilen elementten eski-sinif sınıfını kaldırabilirsiniz.

toggle metodu, belirtilen bir sınıfın elementin sınıf listesinde olup olmadığını kontrol eder. Eğer sınıf listede varsa kaldırır, yoksa ekler. Örneğin, element.classList.toggle(aktif) şeklinde kullanarak, aktif sınıfını elementin sınıf listesinden ekleyebilir veya kaldırabilirsiniz.

contains metodu, belirtilen bir sınıfın elementin sınıf listesinde olup olmadığını sorgular. Eğer sınıf listede varsa true, yoksa false döndürür. Örneğin, element.classList.contains(var-mi) şeklinde kullanarak, var-mi sınıfının elementin sınıf listesinde olup olmadığını sorgulayabilirsiniz.

classList Ekleme

Javascript classList metodu, HTML elementine sınıf eklemek için kullanılır. Bir HTML elementinin sınıflarına classList objesi üzerinden erişilir ve sınıf eklemek için kullanılan add() metodu çağrılır. Örneğin, bir butona tıklandığında yeni bir sınıf eklemek istiyorsanız, classList.add() yöntemini kullanabilirsiniz.

class eklemek için add() metodunu kullanmak oldukça basittir. Öncelikle sınıf eklemek istediğiniz HTML elementine erişmeniz gerekir. Ardından, classList.add() metodunu kullanarak yeni sınıfı ekleyebilirsiniz. Örneğin, aşağıdaki örnek kodda bir butona tıklandığında active sınıfını ekliyoruz:

Bir diğer kullanım şekli ise birden fazla sınıf eklemektir. add() metodu, aynı elemente birden fazla sınıf eklemek için kullanılabilir. Sadece add() metodunu birden fazla kez çağırarak istediğiniz sınıfları ekleyebilirsiniz. Örneğin, classList.add(class1, class2, class3) şeklinde kullanabilirsiniz.

class eklerken dikkat etmeniz gereken bir diğer nokta ise eklemek istediğiniz sınıfın zaten var olup olmadığını kontrol etmektir. Eğer eklemek istediğiniz sınıf zaten varsa, add() metodu bu durumu görmezden gelir ve sınıfı birden fazla kez eklemeye çalışmaz.

classList Kaldırma

Javascript classList Nedir?

JavaScript classList metodu, bir HTML elementinin class attribute’unu değiştirmek veya diğer class manipülasyonları yapmak için kullanılır. Bu metot sayesinde elementin classList’inden class ekleyebilir, class kaldırabilir veya var olan class’ı değiştirebiliriz.

classList.remove() metodu sayesinde, bir HTML elementinin classList’inden belirli bir class’ı kaldırabiliriz. Örneğin; bir button elementi üzerinde hover özelliği olduğunda bu hover efektini classList.remove() metodu ile kaldırabilir ve elementin görünümünü değiştirebiliriz.

Bu metot aynı zamanda, responsive web tasarımında da oldukça faydalıdır. Örneğin; ekran boyutu küçüldüğünde navigation menünün classList’inden belirli class’ı kaldırmak suretiyle mobil uyumlu bir tasarım elde edebiliriz.

Bununla birlikte, classList.remove() metodu ile kaldırılan class’ın tekrar eklenmesi de mümkündür. Bu sayede dinamik bir tasarım oluşturabilir ve kullanıcı deneyimini artırabiliriz.

classList Kaldırma Örneği
Bir HTML elementine hover etkisi eklemek için öncelikle belirli bir class atanır. classList.remove() metodu ile bu class’ın kaldırılması sağlanır. Kullanıcı bu element üzerine geldiğinde hover efekti kaldırılmış olacaktır.