HTML DOM createAttribute()用法及代碼示例

HTML DOM createAttribute() 方法用於使用 JavaScript 為 HTML 元素創建特定屬性。 createAttribute() 方法創建具有給定名稱的屬性並將該屬性作為 Attr 對象返回。

用法

以下是 createAttribute() 方法的語法 -

document.createAttribute(attributename)

示例

讓我們看一個 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>

輸出

這將產生以下輸出 -

單擊“創建”按鈕 -

在上麵的例子中 -

我們創建了一個 ID 為 “DIV1” 的樣式

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

然後我們創建了一個 <div> 元素，裏麵有一個 <p> 元素。

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

然後，我們創建了一個按鈕 CREATE，當用戶點擊它時將執行 attrCreate() 函數 -

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

attrCreate() 函數使用文檔對象上的 getElementsByTagName() 方法獲取 <div> 元素並將其分配給變量 x。使用 createAttribute() 方法創建 “id” 屬性並使用其 value 屬性為其分配值 “DIV1”，這是我們之前創建的樣式的 id。最後，我們將 “id” 屬性及其值設置為 <div> 元素 -

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

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM createAttribute() method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。