Web ön uç uygulamalarıyla çalışıyorsak, bir öğenin sınıfını değiştirmek sık sık yapmamız gereken bir şeydir.

Bu makalede, JavaScript ile bir elemanın sınıfının nasıl değiştirileceğine bir göz atacağız.

ClassList Özelliği

Bir öğe, öğeye classListuygulanan sınıfları değiştirmemize izin verme özelliğine sahiptir .

Örneğin, bir div'imiz varsa:

<div>
  hello world
</div>

document.querySelector("div").classList.add('hello');

Eğer hellosınıf zaten eklenir, sonra hiçbir şey yapılacaktır.

Bir sınıfı kaldırmak için classList.removeyöntemi çağırabiliriz :

document.querySelector("div").classList.remove('hello');

document.querySelector("div").classList.contains('hello');

Ve bir elemana uygulanan sınıfı değiştirmek için classList.toggleyöntemi çağırabiliriz :

document.querySelector("div").classList.toggle('hello');

Aksi takdirde, hellosınıf div'e eklenecektir.

Bu, en yeni tarayıcılarda mevcuttur.

ClassName Özelliği

Bir elemanın sınıflarını değiştirmenin başka bir yolu, classNamestring özelliğini değiştirmektir.

Örneğin şöyle yazabiliriz:

document.querySelector("div").className = 'hello';

Özelliği değiştirerek bir sınıf eklemek için şunu classNameyazabiliriz:

document.querySelector("div").className += ' hello';

helloSınıfı kaldırmak için şu replaceyöntemi kullanabiliriz :

document.querySelector("div").className.replace(/(?:^|\s)hello(?!\S)/g, '')

gBayrak bu tüm örneklerini bulmak ve hepsi üzerinde değiştirilmesini yapacağız.

Bir sınıfın div'de olup olmadığını bulmak için şunu yazabiliriz:

document.querySelector("div").className.match(/(?:^|\s)hello(?!\S)/)

Sonuç

Bir HTML öğesinin sınıflarını değiştirmenin en iyi ve en kolay yolu, classListözelliği kullanmaktır .

Alternatif olarak, bir elemanın niteliğini classNamedeğiştirmek için string özelliğini de değiştirebiliriz class.

Plainenglish.io adresinde daha fazla içerik