HTML DOM setAttribute()เมธอด
❮ วัตถุธาตุตัวอย่าง
เพิ่มแอตทริบิวต์ class ด้วยค่าของ "democlass" ให้กับองค์ประกอบ <h1>:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
ก่อนตั้งค่าแอตทริบิวต์:
Hello World
หลังจากตั้งค่าแอตทริบิวต์:
Hello World
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
setAttribute() วิธีการเพิ่มแอตทริบิวต์ที่ระบุให้กับองค์ประกอบและให้ค่าที่ระบุ
หากมีแอตทริบิวต์ที่ระบุอยู่แล้ว จะมีการตั้งค่า/เปลี่ยนแปลงเฉพาะค่าเท่านั้น
หมายเหตุ:แม้ว่าจะเป็นไปได้ที่จะเพิ่มแอตทริบิวต์ style ด้วยค่าให้กับองค์ประกอบด้วยวิธีการนี้ ขอแนะนำให้คุณใช้ คุณสมบัติของอ็อบเจกต์ Styleแทนสำหรับการจัดสไตล์แบบอินไลน์ เนื่องจากการดำเนินการนี้จะไม่เขียนทับคุณสมบัติ CSS อื่นๆ ที่อาจระบุไว้ แอตทริบิวต์สไตล์:
แย่:
element.setAttribute("style", "background-color: red;");
ดี:
element.style.backgroundColor = "red";
เคล็ดลับ:ใช้ เมธอด removeAttribute()เพื่อลบแอตทริบิวต์ออกจากองค์ประกอบ
เคล็ดลับ:ดูเมธอดsetAttributeNode() ด้วย
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
Method | |||||
---|---|---|---|---|---|
setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
ไวยากรณ์
element.setAttribute(attributename, attributevalue)
ค่าพารามิเตอร์
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 |
รายละเอียดทางเทคนิค
คืนมูลค่า: | ไม่มีค่าส่งคืน |
---|---|
เวอร์ชัน DOM | วัตถุองค์ประกอบหลักระดับ 1 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เปลี่ยนช่องป้อนข้อมูลเป็นปุ่มป้อนข้อมูล:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
ก่อนตั้งค่าแอตทริบิวต์:
หลังจากตั้งค่าแอตทริบิวต์:
ตัวอย่าง
เพิ่มแอตทริบิวต์ href ด้วยค่า "www.w3schools.com" ให้กับองค์ประกอบ <a>:
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
ก่อนตั้งค่าแอตทริบิวต์:
หลังจากตั้งค่าแอตทริบิวต์:
ตัวอย่าง
ค้นหาว่าองค์ประกอบ <a> มีแอตทริบิวต์เป้าหมายหรือไม่ หากเป็นเช่นนั้น ให้เปลี่ยนค่าของแอตทริบิวต์เป้าหมายเป็น "_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");
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน HTML: แอตทริบิวต์ HTML
การอ้างอิง HTML DOM: getAttribute() Method
การอ้างอิง HTML DOM: hasAttribute() Method
การอ้างอิง HTML DOM: removeAttribute() Method
❮ วัตถุธาตุ