JavaScript kullanarak bir HTML ögesine nasıl bir öznitelik eklenir/güncellenir?

JavaScript kullanarak bir özniteliği ekleyecek/güncelleyecek bir yol bulmaya çalışıyorum. setAttribute() fonksiyonu ile yapabileceğimi biliyorum ama bu IE'de çalışmıyor.

Cevap #1

Burada, IE de dahil olmak üzere birçok farklı tarayıcıda özniteliklerin davranışını okuyabilirsiniz.

element.setAttribute() işini görmeli, hatta IE’de bile. Denedin mi? Eğer çalışmazsa, belki element.attributeName='value' işe yarayabilir.

Cevap #2

Tamamen uyumlu olmak istiyorsanız kolay görünen şey aslında zorlayıcıdır.

var e = document.createElement('div');

Varsayalım ki eklemek için 'div1' adında bir kimliğiniz var.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

Bunların hepsi çalışacaktır, sadece sonuncusu IE 5.5'te çalışmaz (bu artık eski tarihlerde kaldı ama yine de güncellenmemiş XP'nin varsayılanıdır).

Ama elbette bazı durumlar vardır. IE 8 öncesinde çalışmaz:e.attributes['style'] Hata vermez ama aslında sınıfı ayarlamaz, className kullanılmalıdır:e['class'].
Ancak, attributes kullanıyorsanız bu çalışacaktır:e.attributes['class']

Özetle, nitelikleri literal ve nesne yönelimli olarak düşünün.

Kelimenin tam anlamıyla, sadece x='y' çıktısını almak ve üzerinde düşünmemek istiyorsunuz. Bunu da attribute'lar, setAttribute, createAttribute için vardır (IE'nin stil istisnası dışında). Ama bunlar gerçekten nesneler olduğu için işler karışabilir.

jQuery innerHTML karışıklığı yerine düzgün bir şekilde bir DOM öğesi oluşturma zahmetine gireceğinizden, onu bir nesne gibi ele alır ve e.className='fooClass' ve e.id='fooID' ile devam ederdim. Bu bir tasarım tercihi, ancak bu durumda onu nesne dışında bir şeymiş gibi ele almaya çalışmak size karşı çalışır.

Diğer yöntemlerde olabileceği gibi size asla ters etki yapmaz, sadece class'ın className ve style'ın bir nesne olduğunu bilmeniz yeterli, yani style.width, style="width:50px" değil. Ayrıca tagName'i hatırlayın ama bu zaten createElement ile ayarlandığı için bununla ilgilenmenize gerek yok.

Bu, istediğimden daha uzundu, ama JS'te CSS manipülasyonu zor bir iştir.

Cevap #3

Zorunlu jQuery çözümü. title özniteliğini foo olarak bulur ve ayarlar. Bunun bir id ile yapıldığı için tek bir elementi seçtiğini unutmayın, ancak seçiciyi değiştirerek aynı özniteliği bir koleksiyon üzerinde de kolayca ayarlayabilirsiniz.

$('#element').attr( 'title', 'foo' );