จะเพิ่ม / อัปเดตแอตทริบิวต์ให้กับองค์ประกอบ HTML โดยใช้ JavaScript ได้อย่างไร

128

ฉันกำลังพยายามหาวิธีที่จะเพิ่ม / อัปเดตแอตทริบิวต์โดยใช้ JavaScript ฉันรู้ว่าฉันสามารถทำได้ด้วยsetAttribute()ฟังก์ชัน แต่ใช้ไม่ได้ใน IE

javascript html cross-browser

— dev.e.loper
แหล่งที่มา

163

คุณสามารถอ่านที่นี่เกี่ยวกับพฤติกรรมของคุณลักษณะในเบราว์เซอร์ที่แตกต่างกันจำนวนมากรวมทั้ง IE

element.setAttribute()ควรทำเคล็ดลับแม้ใน IE คุณลองหรือยัง? หากไม่ได้ผลบางที element.attributeName = 'value'อาจได้ผล

— และฉัน
แหล่งที่มา

5

ใช้งานได้ จะสร้างแอตทริบิวต์หากไม่มีอยู่และอัปเดตหากมีอยู่ เอกสารนี้ได้รับการบันทึกไว้ที่ใดที่หนึ่งเท่าที่วิธีการทำงานนี้?

— dev.e.loper

@ dev.e.loper DOM spec เป็นจุดเริ่มต้นที่ดี: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…

— valentinas

1

เมื่อฉันทำสิ่งต่อไปนี้: document.getElementById("nav").setAttribute("class", "active");มันใช้งานได้ในคอนโซล Chrome JS แต่ในหน้าจริงมันใช้ไม่ได้.. มีไอเดียไหม? อย่างไรก็ตามในหน้าจริงฉันรวม.jsไฟล์ไว้ก่อนสิ้นสุดbodyขอบเขต

— knownasilya

36

สิ่งที่ดูเหมือนง่ายนั้นค่อนข้างยุ่งยากหากคุณต้องการเข้ากันได้อย่างสมบูรณ์

var e = document.createElement('div');

สมมติว่าคุณมี id ของ 'div1' ที่จะเพิ่ม

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

สิ่งเหล่านี้จะใช้งานได้ทั้งหมดยกเว้นเวอร์ชันสุดท้ายใน IE 5.5 (ซึ่งเป็นประวัติศาสตร์โบราณ ณ จุดนี้ แต่ยังคงเป็นค่าเริ่มต้นของ XP ที่ไม่มีการอัปเดต)

แต่มีเหตุการณ์ที่อาจเกิดขึ้นแน่นอน จะไม่ทำงานใน IE ก่อน 8: e.attributes['style'] จะไม่เกิดข้อผิดพลาด แต่จะไม่จริงตั้งชั้นเรียนนั้นจะต้องได้ e['class']className:
อย่างไรก็ตามหากคุณใช้แอตทริบิวต์สิ่งนี้จะใช้ได้:e.attributes['class']

โดยสรุปให้คิดว่าแอตทริบิวต์เป็นตัวอักษรและเชิงวัตถุ

ตามตัวอักษรคุณแค่ต้องการให้มันคาย x = 'y' ออกมาและไม่ต้องคิดถึงมัน นี่คือแอตทริบิวต์ setAttribute, createAttribute สำหรับ (ยกเว้นข้อยกเว้นสไตล์ของ IE) แต่เนื่องจากสิ่งเหล่านี้เป็นวัตถุจริงๆสิ่งต่างๆอาจสับสนได้

เนื่องจากคุณกำลังประสบปัญหาในการสร้างองค์ประกอบ DOM อย่างถูกต้องแทนที่จะเป็น jQuery innerHTML slop ฉันจะปฏิบัติต่อมันเหมือนหนึ่งและยึดติดกับ e.className = 'fooClass' และ e.id = 'fooID' นี่คือความชอบในการออกแบบ แต่ในกรณีนี้การพยายามปฏิบัติเหมือนกับสิ่งอื่นที่ไม่ใช่วัตถุจะต่อต้านคุณ

มันจะไม่ย้อนกลับมาที่คุณเหมือนอย่างที่เมธอดอื่น ๆ อาจทำได้เพียงแค่ระวังว่าคลาสคือ className และสไตล์เป็นอ็อบเจกต์ดังนั้นมันจึงเป็น style.width ไม่ใช่ style = "width: 50px" จำ tagName ด้วย แต่สิ่งนี้ถูกตั้งค่าโดย createElement ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้

นานกว่าที่ฉันต้องการ แต่การปรับแต่ง CSS ใน JS เป็นธุรกิจที่ยุ่งยาก

— JPearce
แหล่งที่มา

5

Windows XP ออกไปพร้อมกับ IE6 ไม่ใช่ 5.5 นั่นจะแย่มาก

— mgol

สิ่งนี้ใช้ได้กับidอย่างอื่นเช่นdata-toggle

— StallingOne

30

บังคับแก้ปัญหา jQuery ค้นหาและชุดแอตทริบิวต์title fooโปรดทราบว่าสิ่งนี้จะเลือกองค์ประกอบเดียวเนื่องจากฉันกำลังทำโดย id แต่คุณสามารถตั้งค่าแอตทริบิวต์เดียวกันในคอลเล็กชันได้อย่างง่ายดายโดยเปลี่ยนตัวเลือก

$('#element').attr( 'title', 'foo' );

— tvanfosson
แหล่งที่มา

3

+1 สำหรับโซลูชัน jQuery ในกรณีของฉันฉันพยายามหลีกเลี่ยง jQuery และสร้างเป็น javascript บริสุทธิ์เนื่องจากข้อกำหนดในการทำงานของฉัน ฉันดีใจที่คำตอบทั้งสองมีอยู่ ขอบคุณ

— NuclearPeon

7

คุณต้องการทำอะไรกับแอตทริบิวต์? เป็นแอตทริบิวต์ html หรือของคุณเอง?

เวลาส่วนใหญ่คุณสามารถระบุเป็นคุณสมบัติ: ต้องการตั้งชื่อในองค์ประกอบหรือไม่? element.title = "foo"จะทำ

สำหรับแอตทริบิวต์ JS ที่กำหนดเองของคุณเอง DOM นั้นสามารถขยายได้ตามธรรมชาติ (aka expando = true) ซึ่งผลสรุปง่ายๆคือคุณสามารถทำได้element.myCustomFlag = fooและอ่านได้ในภายหลังโดยไม่มีปัญหา

— annakata
แหล่งที่มา