Sınıfları değiştirmek için modern HTML5 Teknikleri
Modern tarayıcılar, bir kütüphaneye ihtiyaç duymadan sınıfları değiştirmeyi kolaylaştıran yöntemler sağlayan classList ekledi:
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 bu sayfadan kullanılabilen IE8 ve IE9'a destek eklemek için bir şim vardır . Yine de giderek daha fazla destekleniyor .
Basit çapraz tarayıcı çözümü
Bir öğeyi seçmenin standart JavaScript yolu document.getElementById("Id"), aşağıdaki örneklerin kullandığı yöntemdir - elbette öğeleri başka yollarla elde edebilirsiniz ve doğru durumda thisbunun yerine basitçe kullanabilirsiniz - ancak, bununla ilgili ayrıntılara girmek kapsamın ötesindedir. cevap.
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.)
Bir öğeye ek sınıf eklemek için:
Bir öğeye, varolan değerleri kaldırmadan / etkilemeden bir sınıf eklemek için bir boşluk ve yeni sınıf adı ekleyin, örneğin:
document.getElementById("MyElement").className += " MyClass";
Bir öğeyi bir öğeden kaldırmak için:
Bir öğeye tek bir sınıfı, diğer potansiyel sınıfları etkilemeden kaldırmak için, basit bir normal ifade değişikliği gerekir:
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ı aşağıdaki gibidir:
(?:^|\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)
gBayrak gerekli durumlarda sınıf adı eklendi birden çok kez olarak tekrarına yerini söyler.
Bir öğenin zaten bir öğeye uygulanıp uygulanmadığını kontrol etmek için:
Bir sınıfı kaldırmak için yukarıda kullanılan aynı regex, belirli bir sınıfın var olup olmadığına dair bir kontrol 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 (örneğin onclick="this.className+=' MyClass'") içine yazmak mümkün olsa da, bu önerilen davranış değildir. Özellikle daha büyük uygulamalarda, HTML işaretlemesini JavaScript etkileşim mantığından ayırarak daha sürdürülebilir kod elde edilir.
Bunu başarmanın ilk adımı bir işlev oluşturmak ve işlevi onclick özniteliğinde çağırmaktır, örneğin:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(Bu kodun komut dosyası etiketlerinde olması gerekmez, bu sadece örnek olması içindir ve JavaScript'i farklı bir dosyaya eklemek daha uygun olabilir.)
İkinci adım onclick olayını HTML'den JavaScript'e taşımak, örneğin addEventListener kullanarak
<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>
(Window.onload kısmının, HTML'nin yüklenmesi bittikten sonra bu işlevin içeriğinin yürütülmesi için gerekli olduğunu unutmayın - bu olmadan JavaScript kodu çağrıldığında MyElement olmayabilir, bu nedenle satır başarısız olur.)
JavaScript Çerçeveleri ve Kütüphaneleri
Yukarıdaki kodun tamamı standart JavaScript'tedir, ancak ortak görevleri basitleştirmek için bir çerçeve veya kitaplık kullanmak ve kodunuzu yazarken aklınıza gelmeyebilecek sabit hatalardan ve uç durumlardan yararlanmak yaygın bir uygulamadır.
Bazı insanlar, bir sınıfı değiştirmek için ~ 50 KB'lik bir çerçeve eklemenin aşırı olduğunu düşünürken, önemli miktarda JavaScript çalışması veya olağandışı çapraz tarayıcı davranışına sahip olabilecek herhangi bir şey yapıyorsanız, düşünmeye değer.
(Çok kabaca bir kütüphane, belirli bir görev için tasarlanmış bir araç setidir, ancak bir çerçeve genellikle birden çok kütüphane içerir ve tam bir görev kümesi gerçekleştirir.)
Yukarıdaki örnekler , muhtemelen en yaygın kullanılan JavaScript kitaplığı olan jQuery kullanılarak yeniden oluşturulmuştur (yine de araştırmaya değer başkaları da vardır).
( $Burada jQuery nesnesi olduğunu unutmayın .)
JQuery ile Sınıfları Değiştirme:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
Buna ek olarak, jQuery geçerli değilse bir sınıf eklemek veya aşağıdakileri yapan bir sınıfı kaldırmak için bir kısayol sağlar.
$('#MyElement').toggleClass('MyClass');
JQuery ile bir click olayına bir işlev atama:
$('#MyElement').click(changeClass);
veya bir kimliğe ihtiyaç duymadan:
$(':button:contains(My Button)').click(changeClass);