• 0

JavaScript'te CSS Class (Sınıfları) Nasıl Değiştirilir

4 hafta önce , Okuma süresi 1 dakika.

JavaScript'te CSS Class (Sınıfları) Nasıl Değiştirilir
JavaScript'te çoğu kez ihtiyacımız olan CSS class değiştirme işlemlerinin nasıl yapılacağını anlatan bir makale ile karşınızdayım.

Bu makalede, classList DOM Manipulation ile projeniz için JavaScript nesnesini kullanarak CSS sınıflarını nasıl değiştireceğinizi göreceğiz.  classList Nesnesi bir HTML CSS sınıflarını ayarlamasını sağlar.

Başlıyoruz; 

Bir index.html dosya oluşturun ve style CSS sınıfları içeren bir etiket ve aşağıdaki özelliklere sahip bir paragraf öğesi ekleyelim:

<style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World!
</p>

Şimdi metninizi classList özellik ile CSS sınıflarınızı  değiştirme işlemini uygulayalım. Bu yöntemi kullanmanın birden fazla yolu bulunmaktadır. Bunların en sık kullanılan 2 farklı yöntemine  elimden geldiği kadar değineceğim. 

1. Yöntem:  .add() ve .contains() Yöntemlerini Kullanma

Bir index.js dosya oluşturalım, html sayfamızdaki paragraf öğenize bir referans alalım ve classList.add() yöntemini çağıralım. :

const myText = document.getElementById('myText');
myText.classList.add('colorText');

Yerleşik classList.add() yöntem, HTML öğenize bir sınıf uygular. Bu durumda, paragraf öğesindeki metniniz artık mor görünecektir.

classList.contains() Bir boolean döndürme yöntemini kullanarak CSS sınıfının paragraf öğenizde olup olmadığını da kontrol edebilirsiniz :

const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // true

Not : consol.log ile ilgili kullanımı bildiğinizi varsayıyorum ama yinede önümüzdeki günlerde bu konu hakkında detaylı bir makale yayınlayacağım. Yukarıdaki son kodda sistem başarılı ise console.log alanınıda true cevabı dönecektir. 

2. Yöntem: .item() ve .remove() Yöntemlerini Uygulama

index.js dosyamızın, paragraf elemana daha fazla CSS sınıfları ekleybiliriz yani var olan CSS class'ı değilde yanına bir class daha atamak istiyorsak kullanabiliriz. Şöyle ki :

const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

Peki bir CSS class'ını kaldırmak istiyorsak ne yapacağız işte burada da classList.remove() yöntemi devreye girmektedir. :

const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

Sonuç olarak ; 

classList  özelliği JavaScript içinde HTML öğelerini ve bunların CSS sınıflarını değiştirebilme imkanını bize yüksek performans ve işlevsellik ile  sağlamaktadır.

#javascript