jQuery'den kurtulma seansları. sınıf (class) işlemleri

jQuery'de en çok kullandığımız özelliklerinden birisi de sınıf tanımlama, silme, varlığını kontrol etme ve toggleClass.

Peki bunların normal javascript'te karşılığı var mı ve bu kadar kolay kullanabiliyor muyuz? Elbette. Sırası ile inceleyelim.

Sınıf (class) ekleme

Seçtiğimiz elemana bir sınıf tanımlamak istediğimizde

jQuery ile

$el.addClass('aktif');

Normal Js ile

el.classList.add('aktif');

çok benzer tanımlar.

Sınıf (class) silme

Seçtiğimiz elemana ait sınıfı silmek istediğimizde

jQuery ile

$el.removeClass('aktif'); 

Normal Js ile

el.classList.remove('aktif');

yine çok benzer tanımlar.

Sınıfın varlığını kontrol edelim

Bir çok yerde seçilen eleman atanmış bir sınıfın olup olmadığını kontrol ederiz ve buna göre işlem yaparız.

jQuery ile

$el.hasClass('aktif');

Normal Js ile

el.classList.contains('aktif');

benzer kullanım.

Sınıf geçişi (toggle)

Çok tercih edilen bir diğer sınıf işlemedir.

jQuery ile

$el.toggleClass('aktif'); 

Normal Js ile

el.classList.toggle('aktif');

çok kullanışlı bu özelliğin normal js olması süper.

Sonuç

jQuery'den esinlenerek classList API'yi geliştirdiler. Artık aynı yetenekler normal javascript'te de var.

jQuery ile aynı kolaylıkta bir kullanım sağlayan normal js çözümlerini tercih etmek bize hız kazandıracaktır.

IE10 ve sonrası için desteği olan bu özellikleri rahatlıkla kullanabiliriz.

Kaynaklar

Read more

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu