Bagaimana cara menambah / memperbarui atribut ke elemen HTML menggunakan JavaScript?

128

Saya mencoba menemukan cara yang akan menambah / memperbarui atribut menggunakan JavaScript. Saya tahu saya bisa melakukannya dengan setAttribute()fungsi tetapi itu tidak berfungsi di IE.

javascript html cross-browser dev.e.loper
sumber

Jawaban:

163

Anda dapat membaca di sini tentang perilaku atribut di banyak browser berbeda, termasuk IE.

element.setAttribute()harus melakukan trik, bahkan di IE. Apakah kamu sudah mencobanya? Jika tidak berhasil, maka mungkin element.attributeName = 'value'mungkin berhasil.

dan saya
sumber
5
ini bekerja. itu menciptakan atribut jika tidak ada dan memperbaruinya jika memang ada. Apakah ini didokumentasikan di suatu tempat sejauh cara kerjanya?
dev.e.loper
@ dev.e.loper spec DOM adalah tempat yang baik untuk memulai: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
valentinas
1
Ketika saya melakukan hal berikut: document.getElementById("nav").setAttribute("class", "active");ini bekerja di konsol Chrome JS, tetapi di halaman yang sebenarnya itu tidak berfungsi .. ada ide? By the way, di halaman yang sebenarnya saya sertakan .jsfile sebelum akhir bodyruang lingkup.
knownasilya
36

Apa yang tampaknya mudah sebenarnya rumit jika Anda ingin sepenuhnya kompatibel.

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

Katakanlah Anda memiliki id 'div1' untuk ditambahkan. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Ini semua akan berfungsi kecuali yang terakhir di IE 5.5 (yang merupakan sejarah kuno pada saat ini tetapi masih merupakan default XP tanpa pembaruan).

Tapi ada kemungkinan, tentu saja. Tidak akan bekerja di IE sebelum 8: e.attributes['style'] tidak akan kesalahan tetapi tidak akan benar-benar mengatur kelas, itu harus className: e['class'].
Namun, jika Anda menggunakan atribut maka ini AKAN bekerja:e.attributes['class']

Singkatnya, anggap atribut sebagai literal dan berorientasi objek.

Secara literal, Anda hanya ingin meludahkan x = 'y' dan tidak memikirkannya. Inilah atribut untuk, setAttribute, createAttribute untuk (kecuali untuk pengecualian gaya IE). Tetapi karena ini benar-benar benda yang bisa membingungkan.

Karena Anda akan kesulitan membuat elemen DOM dengan benar daripada jQuery innerHTML slop, saya akan memperlakukannya seperti satu dan tetap dengan e.className = 'fooClass' dan e.id = 'fooID'. Ini adalah preferensi desain, tetapi dalam hal ini mencoba memperlakukan adalah apa pun selain benda yang bekerja melawan Anda.

Ini tidak akan pernah menjadi bumerang pada Anda seperti metode lain mungkin, hanya menyadari kelas menjadi className dan gaya menjadi objek jadi itu style.width bukan style = "width: 50px". Ingat juga tagName tetapi ini sudah disetel oleh createElement sehingga Anda tidak perlu khawatir.

Ini lebih lama dari yang saya inginkan, tetapi manipulasi CSS di JS adalah bisnis yang rumit.

JPearce
sumber
5
Windows XP keluar dengan IE6, bukan 5.5. Itu akan mengerikan.
mgol
Ini bekerja dengan id, bukan dengan sesuatu yang lain sepertidata-toggle
stallingOne
30

Solusi jQuery wajib . Temukan dan setel titleatribut foo. Perhatikan ini memilih satu elemen karena saya melakukannya dengan id, tetapi Anda dapat dengan mudah mengatur atribut yang sama pada koleksi dengan mengubah pemilih.

$('#element').attr( 'title', 'foo' );
tvanfosson
sumber
3
+1 untuk solusi jQuery. Dalam kasus saya, saya mencoba menghindari jQuery dan memproduksinya dalam javascript murni karena persyaratan pekerjaan saya. Saya senang kedua jawaban itu ada. Terima kasih.
NuclearPeon
7

Apa yang ingin Anda lakukan dengan atribut? Apakah itu atribut html atau sesuatu milik Anda sendiri?

Sebagian besar waktu Anda hanya bisa mengatasinya sebagai properti: ingin menetapkan judul pada suatu elemen? element.title = "foo"akan melakukannya.

Untuk atribut JS kustom Anda sendiri, DOM secara alami dapat diperpanjang (alias expando = true), hasil sederhana yang dapat Anda lakukan element.myCustomFlag = foodan kemudian membacanya tanpa masalah.

annakata
sumber