Phương thức attr

Phương thức attr cho phép lấy và thay đổi bất kỳ thuộc tính nào của phần tử.

Quan trọng là không nhầm lẫn giữa thuộc tính (property) và thuộc tính (attribute) của phần tử. Khi tạo cây DOM, các thuộc tính (attribute) được chuyển thành các thuộc tính (property) DOM tương ứng của phần tử. Tên của chúng không phải lúc nào cũng trùng khớp, cũng như giá trị của chúng. Một số thuộc tính (property) cũng có thể không có thuộc tính (attribute) tương ứng, chúng chỉ có thể được lấy và thiết lập khi sử dụng phương thức prop, ví dụ thuộc tính tagName.

Cú pháp

Lấy giá trị của thuộc tính:

$(selector).attr(tên thuộc tính);

Thay đổi giá trị của thuộc tính:

$(selector).attr(tên thuộc tính, giá trị mới);

Thay đổi giá trị của nhiều thuộc tính:

$(selector).attr({thuộc_tính_thứ_nhất: giá_trị_mới, thuộc_tính_thứ_hai: giá_trị_mới, ...});

Áp dụng một hàm cho mỗi phần tử trong tập hợp:

$(selector).attr(tên thuộc tính, function(số thứ tự trong tập hợp, giá trị hiện tại của thuộc tính));

Ví dụ

Trong ví dụ tiếp theo, chúng ta sẽ lấy một input thông qua id của nó và in ra giá trị của thuộc tính value của nó:

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

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

Ví dụ

Bây giờ hãy ghi giá trị mới 'www' vào cùng thuộc tính đó:

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

Mã HTML sẽ trông như thế này:

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

Ví dụ

Hãy cùng thay đổi đồng thời các thuộc tính type và value:

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

Mã HTML sẽ trông như thế này:

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

Ví dụ

Hãy thay đổi thuộc tính value cho mỗi input - thêm số thứ tự của phần tử trong tập hợp vào value hiện tại:

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

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

Mã HTML sẽ trông như thế này:

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

Xem thêm

phương thức removeAttr,
cho phép xóa thuộc tính của phần tử
phương thức prop,
cho phép làm việc với thuộc tính (property) của phần tử
phương thức val,
cho phép lấy và thay đổi giá trị hiện tại của phần tử