JavaScript ile bir öğenin sınıfını nasıl değiştirebilirim?

JavaScript kullanarak bir HTML öğesinin sınıfını nasıl değiştirebiliriz? Veya onclick gibi bir eyleme yanıt olarak class’ı nasıl değiştirebiliriz?

Sınıfları değiştirmek için modern HTML5 Teknikleri

Modern tarayıcılar, bir kitaplığa ihtiyaç duymadan sınıfları değiştirmeyi kolaylaştıran yöntemler sağlayan classList’i eklediler:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Ne yazık ki, bunlar v10’dan önce Internet Explorer’da çalışmaz, ancak giderek daha fazla desteklendiğini söyleyebiliriz.

Basit tarayıcıdan bağımsız çözüm

Bir öğeyi seçmenin standart JavaScript yolu document.getElementById("Id") kullanmak. Doğal olarak aşağıdaki örnekler bunu kullanıyor – elbette öğeleri başka şekillerde elde edebilirsiniz ancak, bu konuda ayrıntıya girmek bu yazının kapsamı dışında.

Bir öğenin tüm sınıflarını değiştirmek için:

Varolan tüm sınıfları bir veya daha fazla yeni sınıfla değiştirmek için className özniteliğini ayarlayın:

document.getElementById("MyElement").className = "MyClass";

(Birden çok sınıf uygulamak için boşlukla ayrılmış bir liste kullanabilirsiniz.)

Öğeye ek bir sınıf eklemek için:

Varolan değerleri kaldırmadan/etkilemeden bir öğeye sınıf eklemek için, aşağıdaki gibi bir boşluk ve yeni sınıf adı ekleyin:

document.getElementById("MyElement").className += " MyClass";

Bir öğeden sınıf kaldırmak için:

Diğer olası sınıfları etkilemeden bir öğeye tek bir sınıfı kaldırmak için basit bir regex değiştirme gerekir:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Yukarıdaki kod tek bir satırdan oluşuyor, 
okuma kolaylığı için alt alta yazıldı  */

Bu regex’in bir açıklaması aşağıdaki gibidir:

(?:^|\s) # Dizenin başlangıcını veya herhangi bir boşluk karakterini eşleştirme

MyClass  # Sınıf adının kaldırılacağı isim

(?!\S)   # Yukarıdakileri doğrulamak için negatif ileriye doğru tüm sınıf adı
         # Boşluk dışı karakter olmadığından emin olun
         # (yani dizenin veya boşluğun sonu olmalı)

g, sınıf adının birden çok kez eklenmiş olması durumunda, değiştirmenin gerektiği gibi hepsine uygulanması gerektiğini söyler.

Bir sınıfın bir öğeye zaten uygulanıp uygulanmamış olduğunu denetlemek için:

Bir sınıfı kaldırmak için yukarıda kullanılan regex, belirli bir sınıfın var olup olmadığına ilişkin bir denetim olarak da kullanılabilir:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Bu eylemleri onclick olaylarına atama

JavaScript’i doğrudan HTML olay özniteliklerinin içine yazmak mümkün olsa da (örneğin: onclick="this.className+=' MyClass'") bu önerilmez. Özellikle daha büyük uygulamalarda, HTML biçimlendirmesini JavaScript etkileşim mantığından ayırarak daha korunabilir kod elde edilir.

Bunu başarmanın ilk adımı, bir işlev oluşturmak ve onclick özniteliğindeki işlevi çağırmaktır, örneğin:

<script type="text/javascript">
    function changeClass(){
        // Mesela yukarıdaki kod örneklerinden biri 
    }
</script>
...
<button onclick="changeClass()">My Button</button>

İkinci adım, onclick olayını HTML’den JavaScript’e taşımaktır, örneğin addEventListener kullanarak:

<script type="text/javascript">
    function changeClass(){
        // Mesela yukarıdaki kod örneklerinden biri 
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(HTML yüklenmesi tamamlandıktan sonra bu işlevin içeriğinin yürütülmesi için window.onload bölümünün gerekli olduğunu unutmayın – bu olmadan, JavaScript kodu çağrıldığında MyElement olmayabilir, böylece bu satır başarısız olur.)

JavaScript Kütüphaneleri

Yukarıdaki kodların tümü standart JavaScript’te yazıldı. Ancak ortak görevleri basitleştirmek için bir kütüphane kullanmak yaygın bir uygulama. Bu sayede kodunuzu yazarken basit hatalardan kurtulabilir ve diğer kolaylıklardan yararlanabilirsiniz.

Bazı insanlar sadece bir sınıfı değiştirmek için ~ 50 KB’lık bir kütüphane eklemeyi aşırı olarak düşünebilir. Ancak önemli miktarda JavaScript içeren bir uygulama yazıyorsanız veya tarayıcılar arası olağandışı davranışa sahip olabilecek herhangi bir şey yapıyorsanız, buna değecektir.

(Çok kabaca, bir kütüphane belirli bir görev için tasarlanmış bir dizi araçtır)

Yukarıdaki örnekleri jQuery ile tekrar yazalım. (Burada $‘ın jQuery nesnesi olduğunu unutmayın.)

jQuery ile Sınıf değiştirme:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Buna ek olarak, jQuery, sınıf eklemek veya sınıfı kaldırmak için bir kısayol sağlar:

$('#MyElement').toggleClass('MyClass');

jQuery ile bir tıklama olayına işlev atama:

$('#MyElement').click(changeClass);

veya herhangi bir etiketi gerektirmeden:

$(':button:contains(My Button)').click(changeClass);