Metode setAttribute() DOM Element HTML

Definisi dan Penggunaan

setAttribute() Metode menambahkan atribut yang ditentukan dan menetapkan nilai yang ditentukan untuknya.

Jika atribut yang ditentukan sudah ada, hanya atur/perubahan nilai.

Perhatian:Objek HTMLElement di dokumen HTML masih mendefinisikan atribut JavaScript untuk semua atribut standar HTML. Oleh karena itu, hanya saat Anda membutuhkan mengatur atribut yang bukan standar, Anda harus menggunakan metode ini.

Lihat Juga:

Panduan Referensi:

Metode getAttribute()

Metode removeAttribute()

Metode hasAttribute()

Metode hasAttributes()

Metode getAttributeNode()

Metode setAttributeNode()

Metode removeAttributeNode()

Tutorial:

Atribut HTML

Contoh

Contoh 1

Tambahkan atribut class ke elemen:

element.setAttribute("class", "democlass");

Sebelum ditambahkan:

Objek Element

Setelah ditambahkan:

Objek Element

Coba Sendiri

Contoh 2

Ubah bidang input menjadi tombol:

myInput.setAttribute("type", "button");

Coba Sendiri

Sebelum diubah:

Setelah diubah:

Contoh 3

Tambahkan atribut href ke elemen <a>:

myAnchor.setAttribute("href", "");

Coba Sendiri

Sebelum ditambahkan:

Buka codew3c.com

Setelah ditambahkan:

Buka codew3c.com

Contoh 4

Ubah nilai atribut target menjadi "_self":

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

Coba Sendiri

Sintaks

element.setAttribute(name, value)

Parameter

Parameter Deskripsi
name Diperlukan. Nama atribut.
value Diperlukan. Nilai atribut baru.

Nilai Kembalian

Tidak ada.

Lebarkan

Eksepsi Deskripsi
INVALID_CHARACTER_ERR Parameter name Tanda yang tidak diizinkan digunakan dalam nama properti HTML atau XML.
NO_MODIFICATION_ALLOWED_ERR Element saat ini adalah hanya-baca, tidak diizinkan untuk mengubah propertinya.

Perhatian

Dapat menambahkan properti style dengan nilai, tetapi tidak disarankan untuk dilakukan demikian karena hal ini akan menimpa properti lain di dalam properti style.

Silakan gunakan properti objek Style:

Kekurangan:

element.setAttribute("style", "background-color:red;");

Kelebihan:

element.style.backgroundColor = "red";

Dukungan Peramban

element.setAttribute() Adalah fitur DOM Level 1 (1998).

Semua peramban mendukung penuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan