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

Phương thức HTML DOM createAttribute() được dùng để tạo một thuộc tính cụ thể bằng JavaScript cho một phần tử HTML. Phương thức createAttribute() tạo một thuộc tính với tên cho trước và trả về thuộc tính đó như một đối tượng Attr.

Cú pháp

Cú pháp sau đây dùng cho phương thức createAttribute():

document.createAttribute(attributename)

Ví dụ

Hãy xem một ví dụ cho phương thức HTML DOM createAttribute():

<!DOCTYPE html> <html> <head> <title>TẠO THUỘC TÍNH</title> <style> #DIV1{ margin-top:15px; width:250px; height:200px; border:2px solid blue; background-color:lightgreen; } </style> </head> <body> <p>Nhấn nút để tạo thuộc tính "class" cho phần tử div</p> <button onclick="attrCreate()">TẠO</button> <br> <div> <p>Đây là một div mẫu</p> </div> <script> function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút TẠO:

Trong ví dụ trên:

Chúng ta đã tạo kiểu dáng với id "DIV1":

#DIV1{ margin-top:15px; width:250px; height:200px; border:2px solid blue; background-color:lightgreen; }

Chúng ta đã tạo một phần tử <div> có một phần tử <p> bên trong nó.

<div> <p>Đây là một div mẫu</p> </div>

Sau đó, chúng ta đã tạo nút TẠO sẽ thực thi hàm attrCreate() khi được nhấp bởi người dùng:

<button onclick="attrCreate()">TẠO</button>

Hàm attrCreate() lấy phần tử <div> bằng phương thức getElementsByTagName() trên đối tượng document và gán nó cho biến x. Sử dụng phương thức createAttribute(), chúng ta tạo thuộc tính "id" và sử dụng thuộc tính value của nó gán giá trị "DIV1", đây là id của kiểu dáng chúng ta đã tạo trước đó. Cuối cùng, chúng ta đặt thuộc tính "id" cùng với giá trị của nó cho phần tử <div>:

function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); }