Nasıl onClick bir olay JavaScript kullanarak yanıt olarak bir HTML öğesi bir sınıf değiştirebilir miyim?

Ekleme ve Çıkarma Dersleri, basit çapraz tarayıcı JavaScript

Standart JavaScript yolu seçmek için bir unsurdur kullanarak document.getElementById("Id"), ne olduğunu aşağıdaki örnekleri kullanabilirsiniz elbette edinmek elemanları açıdan ve doğru bir durum olabilir sadece kullanın. this yerine - ancak, gitmem detay öbür kapsamının cevap.

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

Bir veya daha fazla yeni sınıflar ile mevcut tüm sınıfları değiştirmek için [null] özniteliğini ayarlayın:

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

(Boşlukla ayrılmış bir listesi. çoklu sınıflar uygulamak için kullanabilirsiniz.)

Bir öğe için ek bir sınıf eklemek için:

Bir öğe için bir sınıf eklemek, mevcut değerleri etkileyen, bir boşluk ekleyin ve yeni [null] gibi/çıkarmadan:

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

Bir öğe, bir sınıf ya da kaldırmak için:

Diğer potansiyel sınıfları etkilemeden bir öğe için tek bir sınıf kaldırmak için, basit bir düzenli ifade gereklidir değiştirin:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* code wrapped for readability - above is all one statement */

Bu normal ifadenin açıklaması şöyledir:

(?:^|\s) # match the start of the string, or any single whitespace character

MyClass  # the literal text for the classname to remove

(?!\S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

g bayrak sınıf adı birden çok kez eklendi diye gerektiği gibi tekrarlayın, yerini söyler.

Eğer bir sınıf zaten bir unsuru uygulanıp uygulanmadığını kontrol etmek için:

Aynı düzenli bir sınıf ayrıca belirli bir sınıfın var olup olmadığını bir kontrol olarak kullanılabilir kaldırmak için: yukarıda kullanılan

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

Özelliği olaylara bu eylemler atama:

Doğrudan HTML olay özellikleri (onclick="this.className =' MyClass'" gibi) içine JavaScript yazmak mümkün olmasına rağmen bu, önerilen bir davranış değildir. Özellikle büyük uygulamalarda, daha fazla sürdürülebilir kod JS etkileşim mantığı HTML biçimlendirme ayırarak elde edilir.

Örneğin ilk adım bu bir fonksiyon oluşturarak ulaşmak ve özelliği öznitelik işlevini çağırmak için:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Kod etiketleri bu kod olması gerekli değildir, bu sadece örnek, kısa olması için, ayrı bir dosyada JS dahil olmak üzere daha uygun olabilir.)

İkinci adım örnek addEventListener kullanmak için JavaScript içine HTML ve özelliği olay hareket etmektir

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }

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

(Pencere unutmayın.yüklendiğinde kısmı o fonksiyon içeriğini çalıştırılır gereklidirsonraHTML yükleme tamamlandı - bu olmadan, MyElement JS denir, bu hat başarısız oluyordu zaman olmayabilir.)

JavaScript ve Kütüphaneleri

Yukarıdaki kod tüm standart JavaScript, ancak yaygın uygulama için kullanabilirsiniz ya da bir çerçeve ya da bir kütüphane basitleştirmek ortak görevler parası sabit hatalar ve kenar durumlarda bu olmayabilir ama bence yazı yazarken kodunuzu.

Buna rağmen bazı insanlar kabul overkill Ekle ~50 KB çerçeve için sadece değişen bir sınıf, eğer yaptıysan eğer önemli miktarda JavaScript iş, veya herhangi bir şey olabilir alışılmadık çapraz tarayıcı davranışlarını, bunu da dikkate değer.

(Çok kabaca, bir kütüphane araçları, belirli bir görev için tasarlanmış bir dizi, genellikle birden fazla kitaplıkları içeren bir çerçeve ve buna rağmen görevlerini tam bir set yapar.)

Yukarıdaki örnekler jQuery en çok kullanılan JavaScript Kütüphanesi diğerleri de araştırılmaya değer bile) muhtemelen kullanarak aşağıda çoğaltılamaz edilmiştir.

($ burada jQuery nesne olduğunu unutmayın.)

JQuery ile değişen Sınıflar:

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

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

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

Buna ek olarak, DV bir sınıf yapıyor çıkarma: geçerli değil mi bir sınıf eklemek için, ya da bir kısayol sağlar

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

JQuery ile click olayı için bir işlev atama:

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

ya da, bir kimliğe ihtiyaç duymadan:

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

Değişen sınıflar için HTML5 Teknikleri

Modern tarayıcılar eklendi yöntemleri daha kolay bir kütüphane gerek kalmadan sınıfları işlemek için yapmak sağlar classList:

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

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

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

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

Ne yazık ki, bu Internet Explorer IE8 için destek eklemek için shim olmasına rağmen v10, önce 9, this page mevcut çalışmaz.