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

❮ Đối tượng phần tử

Thí dụ

Thêm thuộc tính lớp có giá trị là "Democlass" vào phần tử <h1>:

document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");

Trước khi đặt thuộc tính:

`Hello World`

Sau khi thiết lập thuộc tính:

`Hello World`

Thêm các ví dụ "Hãy tự mình thử" bên dưới.

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

Phương thức setAttribute () thêm thuộc tính đã chỉ định vào một phần tử và cung cấp cho nó giá trị được chỉ định.

Nếu thuộc tính được chỉ định đã tồn tại, chỉ giá trị được đặt / thay đổi.

Lưu ý: Mặc dù có thể thêm thuộc tính style với một giá trị vào một phần tử bằng phương pháp này, nhưng bạn nên sử dụng các thuộc tính của đối tượng Style để tạo kiểu nội tuyến, vì điều này sẽ không ghi đè các thuộc tính CSS khác có thể được chỉ định trong thuộc tính style:

Tồi tệ:

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

Tốt:

element.style.backgroundColor = "red";

Mẹo: Sử dụng phương thức removeAttribute () để xóa một thuộc tính khỏi một phần tử.

Mẹo: Xem thêm phương thức setAttributeNode () .

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.

Method
setAttribute()	Yes	8.0	Yes	Yes	Yes

Cú pháp

element.setAttribute(attributename, attributevalue)

Giá trị tham số

Parameter	Type	Description
attributename	String	Required. The name of the attribute you want to add
attributevalue	String	Required. The value of the attribute you want to add

Chi tiết kỹ thuật

Giá trị trả lại:	Không có giá trị trả lại
Phiên bản DOM	Đối tượng phần tử cấp 1 cốt lõi

Các ví dụ khác

Thí dụ

Thay đổi trường đầu vào thành nút đầu vào:

document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");

Trước khi đặt thuộc tính:

Sau khi thiết lập thuộc tính:

Thí dụ

Thêm thuộc tính href có giá trị là "www.w3schools.com" vào phần tử <a>:

document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");

Trước khi đặt thuộc tính:

Go to w3schools.com

Sau khi thiết lập thuộc tính:

Go to w3schools.com

Thí dụ

Tìm hiểu xem phần tử <a> có thuộc tính đích hay không. Nếu vậy, hãy thay đổi giá trị của thuộc tính đích thành "_self":

// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor");

// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}