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

Phương thức HTML DOM createAttribute () được sử 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 và trả về thuộc tính dưới dạng một đối tượng Attr.

Cú pháp

Sau đây là cú pháp cho phương thức createAttribute () -

document.createAttribute(attributename)

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ cho phương thức HTML DOM createAttribute () -

<!DOCTYPE html>
<html>
<head>
<title>CREATE ATTRIBUTE</title>
<style>
   #DIV1{
      margin-top:15px;
      width:250px;
      height:200px;
      border:2px solid blue;
      background-color:lightgreen;
   }
</style>
</head>
<body>
<p>Click the button to create a "class" attribute for the div element</p>
<button onclick="attrCreate()">CREATE</button>
<br>
<div>
<p>This is a sample div</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>

Đầu ra

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

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

Khi nhấp vào nút TẠO -

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

Trong ví dụ trên -

Chúng tôi đã tạo một kiểu với id “DIV1”

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

Sau đó, chúng tôi đã tạo một phần tử

có một phần tử

bên trong nó.

<div>
<p>This is a sample div</p>
</div>

Sau đó, chúng tôi đã tạo một nút CREATE sẽ thực thi hàm attrCreate () khi người dùng nhấp vào -

<button onclick="attrCreate()">CREATE</button>

Hàm attrCreate () nhận phần tử

bằng cách sử dụ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 tôi tạo thuộc tính “id” và sử dụng thuộc tính giá trị của nó để gán cho nó giá trị “DIV1”, là id của kiểu mà chúng tôi đã tạo trước đó. Cuối cùng, chúng tôi đặt thuộc tính “id” cùng với giá trị của nó thành phần tử

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