Phương thức setAttribute() của HTML DOM Element

Định nghĩa và cách sử dụng

setAttribute() Phương thức thêm thuộc tính được chỉ định và gán giá trị cho nó.

Nếu thuộc tính được chỉ định đã tồn tại, chỉ thiết lập/chỉnh sửa giá trị.

Lưu ý:Đối tượng HTMLElement của tài liệu HTML còn định nghĩa các thuộc tính JavaScript tương ứng với tất cả các thuộc tính HTML tiêu chuẩn. Do đó, chỉ cần bạn cần thiết lập thuộc tính không tiêu chuẩn, bạn mới cần sử dụng phương thức này.

Xin xem thêm:

Tài liệu tham khảo:

Phương thức getAttribute()

Phương thức removeAttribute()

Phương thức hasAttribute()

Phương thức hasAttributes()

Phương thức getAttributeNode()

Phương thức setAttributeNode()

Phương thức removeAttributeNode()

Hướng dẫn:

Thuộc tính HTML

Mô hình

Ví dụ 1

Thêm thuộc tính class cho phần tử:

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

Trước khi thêm:

Đối tượng Element

Sau khi thêm:

Đối tượng Element

Thử trực tiếp

Ví dụ 2

Thay đổi trường nhập thành nút:

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

Thử trực tiếp

Trước khi thay đổi:

Sau khi thay đổi:

Ví dụ 3

Thêm thuộc tính href vào thẻ <a>:

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

Thử trực tiếp

Trước khi thêm:

Vui lòng truy cập codew3c.com

Sau khi thêm:

Vui lòng truy cập codew3c.com

Ví dụ 4

Thay đổi giá trị thuộc tính target thành "_self":

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

Thử trực tiếp

Cú pháp

element.setAttribute(name, value)

Parameter

Parameter Mô tả
name Đòi hỏi. Tên thuộc tính.
value Đòi hỏi. Giá trị thuộc tính mới.

Giá trị trả về

Không có.

Ném ra

Bất thường Mô tả
INVALID_CHARACTER_ERR Parameter name Ký tự không được phép sử dụng trong tên thuộc tính HTML hoặc XML thuộc tính.
NO_MODIFICATION_ALLOWED_ERR Đối tượng hiện tại là chỉ đọc, không cho phép修改 thuộc tính của nó.

Lưu ý

Bạn có thể thêm thuộc tính style với giá trị, nhưng không được khuyến khích vì nó sẽ thay thế các thuộc tính khác trong thuộc tính style.

Vui lòng sử dụng thuộc tính của đối tượng Style:

Nhược điểm:

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

Ưu điểm:

element.style.backgroundColor = "red";

Hỗ trợ trình duyệt

element.setAttribute() Là tính năng của DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ