home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด 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>คลิกปุ่มเพื่อสร้างแอตทริบิวต์ "class" สำหรับองค์ประกอบ div</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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมธอด HTML DOM createAttribute()

เมื่อคลิกปุ่ม CREATE -

เมธอด HTML DOM createAttribute()

ในตัวอย่างข้างต้น -

เราสร้างสไตล์ที่มี 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() ดึงองค์ประกอบ <div> โดยใช้เมธอด getElementsByTagName() บนอ็อบเจกต์เอกสารและกำหนดให้ตัวแปร 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); }