ตัวอย่าง
เพิ่ม class แอตทริบิวต์ที่มีค่าของ "democlass" ไป <h1> องค์ประกอบ:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");ก่อนที่จะตั้งแอตทริบิวต์:
Hello World
หลังจากตั้งค่าแอตทริบิวต์:
Hello World
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
setAttribute() วิธีการเพิ่ม specified แอตทริบิวต์องค์ประกอบและให้มันคุ้มค่าที่ระบุ
หาก specified แอตทริบิวต์ที่มีอยู่แล้วเท่านั้นที่ตั้งค่า / การเปลี่ยนแปลง
หมายเหตุ: แม้ว่ามันจะเป็นไปได้ที่จะเพิ่ม style แอตทริบิวต์ที่มีค่าให้กับองค์ประกอบด้วยวิธีนี้ก็จะแนะนำให้คุณใช้ คุณสมบัติของวัตถุสไตล์ แทนสำหรับจัดแต่งทรงผมแบบอินไลน์เพราะนี้จะไม่เขียนทับ CSS คุณสมบัติอื่น ๆ ที่อาจจะระบุไว้ใน style แอตทริบิวต์:
แย่:
element .setAttribute("style",
"background-color: red;");ดี:
element .style.backgroundColor
= "red";เคล็ดลับ: ใช้ removeAttribute() วิธีการที่จะลบแอตทริบิวต์จากองค์ประกอบ
เคล็ดลับ: ดูยัง setAttributeNode() วิธีการ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| setAttribute() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
element .setAttribute( attributename , attributevalue )ค่าพารามิเตอร์
| พารามิเตอร์ | ชนิด | ลักษณะ |
|---|---|---|
| attributename | String | จำเป็นต้องใช้ ชื่อของแอตทริบิวต์ที่คุณต้องการที่จะเพิ่ม |
| attributevalue | String | จำเป็นต้องใช้ ค่าของแอตทริบิวต์ที่คุณต้องการที่จะเพิ่ม |
รายละเอียดทางเทคนิค
| กลับค่า: | ไม่มีค่าตอบแทน |
|---|---|
| DOM รุ่น | หลักระดับ 1 ธาตุวัตถุ |
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนช่องใส่ปุ่มการป้อนข้อมูล:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
ก่อนที่จะตั้งแอตทริบิวต์:
หลังจากตั้งค่าแอตทริบิวต์:
ลองตัวเอง» ตัวอย่าง
เพิ่มแอตทริบิวต์ href ที่มีค่าของ "www.w3ii.com" ไปยัง <a> องค์ประกอบ:
document.getElementById("myAnchor").setAttribute("href", "http://www.w3ii.com"); ก่อนที่จะตั้งแอตทริบิวต์:
Go to w3ii.com
หลังจากตั้งค่าแอตทริบิวต์:
ลองตัวเอง»ตัวอย่าง
หาถ้า <a> องค์ประกอบมีแอตทริบิวต์เป้าหมาย ถ้าเป็นเช่นนั้นเปลี่ยนค่าของ target แอตทริบิวต์ "_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 Tutorial: แอตทริบิวต์ HTML
HTML DOM อ้างอิง: href="met_element_getattribute.html"> getAttribute() Method
HTML DOM อ้างอิง: href="met_element_hasattribute.html"> hasAttribute() Method
HTML DOM อ้างอิง: href="met_element_removeattribute.html"> removeAttribute() Method