Metode attr

Metode attr memungkinkan Anda untuk mendapatkan dan mengubah atribut apa pun dari sebuah elemen.

Penting untuk tidak mencampuradukkan properti dan atribut elemen. Saat membuat pohon DOM, atribut diterjemahkan menjadi properti DOM yang sesuai dari elemen. Nama mereka tidak selalu sama, begitu juga nilainya. Beberapa properti juga mungkin tidak memiliki atribut yang sesuai, mereka hanya bisa didapatkan dan diatur dengan menggunakan metode prop, contohnya properti tagName.

Sintaks

Mendapatkan nilai atribut:

$(selektor).attr(nama atribut);

Mengubah nilai atribut:

$(selektor).attr(nama atribut, nilai baru);

Mengubah nilai beberapa atribut:

$(selektor).attr({atribut_pertama: nilai_baru, atribut_kedua: nilai_baru, ...});

Menerapkan fungsi ke setiap elemen dalam kumpulan:

$(selektor).attr(nama atribut, function(nomor dalam kumpulan, nilai saat ini dari atribut));

Contoh

Dalam contoh berikut, kita akan mendapatkan input berdasarkan id-nya dan menampilkan nilai atribut value-nya:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

Contoh

Sekarang mari tulis nilai baru 'www' ke dalam atribut yang sama:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

Kode HTML akan terlihat seperti ini:

<input type="text" value="www" id="test">

Contoh

Mari ubah secara bersamaan atribut type dan value:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

Kode HTML akan terlihat seperti ini:

<input type="password" value="www" id="test">

Contoh

Mari ubah atribut value untuk setiap input - tambahkan nomor urut elemen dalam kumpulan ke value saat ini:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

Kode HTML akan terlihat seperti ini:

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Lihat juga

metode removeAttr,
yang memungkinkan penghapusan atribut elemen
metode prop,
yang memungkinkan bekerja dengan properti elemen
metode val,
yang memungkinkan mendapatkan dan mengubah nilai saat ini dari sebuah elemen