โพสต์นี้จะอธิบายขั้นตอนการตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบ HTML โดยใช้ JavaScript
วิธีตั้งค่าหลายแอตทริบิวต์ในองค์ประกอบโดยใช้ JavaScript
หากต้องการตั้งค่าแอตทริบิวต์หลายรายการพร้อมกัน ขั้นแรกให้สร้างวัตถุที่มีชื่อและค่าของแอตทริบิวต์ รับรายการคีย์ของวัตถุเป็นอาร์เรย์ด้วย ' Object.keys() ” วิธีการ จากนั้นตั้งค่าแอตทริบิวต์ทั้งหมดบนองค์ประกอบ HTML ที่ระบุด้วย “ setAttribute() ' กระบวนการ.
ไวยากรณ์
ไวยากรณ์ที่กำหนดใช้สำหรับเมธอด setAttribute() :
ธาตุ. setAttribute ( attrName, attrValue ) ;
ไวยากรณ์ข้างต้นประกอบด้วยสองพารามิเตอร์: “ ชื่อ ' และ ' ค่า '.
- “ attrName ” คือชื่อของแอตทริบิวต์ใหม่
- “ attrValue ” คือค่าของแอตทริบิวต์ใหม่
- วิธีการนี้จะสร้างแอตทริบิวต์ใหม่และกำหนดค่าให้กับมัน หากมีแอตทริบิวต์ที่ระบุอยู่แล้ว ค่าของแอตทริบิวต์จะได้รับการอัปเดต
ใช้ไวยากรณ์ที่กำหนดสำหรับเมธอด Object.keys() :
วัตถุ . กุญแจ ( วัตถุ )มันส่งกลับอาร์เรย์ของวัตถุที่กำหนด
ตัวอย่างที่ 1: ตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบโดยใช้เมธอด forEach() กับเมธอด setAttribute()
ขั้นแรก สร้างองค์ประกอบในไฟล์ HTML:
< รหัสปุ่ม = 'ปุ่ม' > ลินุกซ์ฮินท์ ปุ่ม >ขณะนี้หน้าเว็บจะมีลักษณะดังนี้:
ในโค้ด JavaScript ก่อนอื่นให้สร้างวัตถุชื่อ “ องค์ประกอบแอตทริบิวต์ ” และเพิ่มแอตทริบิวต์พร้อมชื่อและค่าให้กับวัตถุ ที่นี่ เราจะเพิ่มแอตทริบิวต์สไตล์ ชื่อขององค์ประกอบ และคุณสมบัติการปิดใช้งานสำหรับองค์ประกอบปุ่ม:
คอสต์ องค์ประกอบแอตทริบิวต์ = {สไตล์ : 'สีพื้นหลัง: rgb(153, 28, 49); สี: ขาว;' ,
ชื่อ : 'ปุ่มลินุกซ์' ,
พิการ : '' ,
} ;
ตอนนี้ให้กำหนดฟังก์ชันชื่อ “ setMultipleAttributesonElement ” ที่แรกเรียก “ Object.keys() ” วิธีการรับอาร์เรย์ของคีย์ของวัตถุแล้วใช้ “ แต่ละ() ” วิธีการวนซ้ำผ่านอาร์เรย์และสุดท้ายเรียกว่า “ setAttribute() ” วิธีการตั้งค่าแอตทริบิวต์ที่กำหนดไว้ทั้งหมดในองค์ประกอบ HTML ที่ระบุ
ฟังก์ชัน setMultipleAttributesonElement ( องค์ประกอบ, องค์ประกอบแอตทริบิวต์ ) {วัตถุ . กุญแจ ( องค์ประกอบแอตทริบิวต์ ) . แต่ละ ( คุณลักษณะ => {
ธาตุ. setAttribute ( แอตทริบิวต์ elemattributes [ คุณลักษณะ ] ) ;
} ) ;
}
ดึงปุ่มโดยใช้รหัสที่กำหนดด้วยความช่วยเหลือของ ' getElementById() ' กระบวนการ:
คอสต์ ปุ่ม = เอกสาร. getElementById ( 'ปุ่ม' ) ;เรียกใช้ฟังก์ชันที่กำหนด “ setMultipleAttributesonElement ” และส่งองค์ประกอบเป็นอาร์กิวเมนต์แรกและวัตถุของแอตทริบิวต์เป็นอาร์กิวเมนต์ที่สอง:
setMultipleAttributesonElement ( ปุ่ม elementAttributes ) ;เอาต์พุตแสดงว่าเพิ่มแอตทริบิวต์หลายปุ่มได้สำเร็จ:
คุณยังสามารถตั้งค่าหลายแอตทริบิวต์ในองค์ประกอบโดยไม่ต้องสร้างวัตถุแยกต่างหากสำหรับแอตทริบิวต์ โดยทำตามตัวอย่างด้านล่าง
ตัวอย่างที่ 2: ตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบที่ใช้สำหรับลูปด้วยวิธี setAttribute()
กำหนดฟังก์ชันด้วยสองพารามิเตอร์ในไฟล์ JavaScript และใช้ for loop เพื่อตั้งค่าแอตทริบิวต์หลายรายการภายในนั้นโดยเรียก ' setAttribute() ' กระบวนการ:
ฟังก์ชัน setMultipleAttributesonElement ( องค์ประกอบ, องค์ประกอบแอตทริบิวต์ ) {สำหรับ ( ให้ฉันใน elemattributes ) {
ธาตุ. setAttribute ( ฉัน, ธาตุแอตทริบิวต์ [ ผม ] ) ;
}
}
ดึงปุ่มโดยใช้รหัสที่กำหนด:
คอสต์ ปุ่ม = เอกสาร. getElementById ( 'ปุ่ม' ) ;เรียกใช้ฟังก์ชันที่กำหนดโดยส่งองค์ประกอบปุ่มและหลายแอตทริบิวต์ในรูปแบบคู่ของชื่อ-ค่า:
setMultipleAttributesonElement ( ปุ่ม, { 'สไตล์' : 'สีพื้นหลัง: rgb(153, 28, 49); สี: สีขาว; , 'พิการ' : '' , 'ชื่อ' : 'ปุ่มลินุกซ์' } ) ;เอาต์พุต
เราได้รวบรวมข้อมูลสำคัญทั้งหมดที่เกี่ยวข้องกับการตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบ HTML โดยใช้ JavaScript
บทสรุป
JavaScript ที่กำหนดไว้ล่วงหน้า setAttribute() วิธีการ ” ใช้เพื่อตั้งค่าแอตทริบิวต์เดียวหรือหลายรายการสำหรับองค์ประกอบ ในการตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบ ขั้นแรกให้สร้างวัตถุที่มีแอตทริบิวต์ในรูปแบบของชื่อ-ค่า รับคีย์ของวัตถุในอาร์เรย์โดยใช้ ' Object.keys() ” จากนั้นตั้งค่าแอตทริบิวต์ทั้งหมดบนองค์ประกอบที่ระบุด้วย “ setAttribute() ' กระบวนการ. ในโพสต์นี้ เราได้แสดงขั้นตอนการตั้งค่าแอตทริบิวต์หลายรายการในองค์ประกอบ HTML โดยใช้ JavaScript