แอตทริบิวต์ของแท็กเป็นคุณสมบัติใน JavaScript
ตอนนี้เรามาเรียนรู้วิธีการเข้าถึงแอตทริบิวต์ ของแท็กกัน กฎที่ใช้คือ: แต่ละแอตทริบิวต์ของแท็กจะตรงกับคุณสมบัติของ DOM element ที่มีชื่อเดียวกัน
มาดูตัวอย่างกัน สมมติว่าเรามีแท็กแบบนี้:
<input id="elem" type="text">
เราจะได้ลิงก์ไปยัง element ของเราในตัวแปร:
let elem = document.querySelector('#elem');
มาแสดงค่าของแอตทริบิวต์ที่เราต้องการ:
console.log(elem.id); // จะแสดง 'elem'
console.log(elem.type); // จะแสดง 'text'
และตอนนี้ลองเปลี่ยนค่าของแอตทริบิวต์เป็นตัวอย่าง:
elem.type = 'submit';
กำหนดอินพุตต่อไปนี้:
<input id="elem" type="email">
กำหนดปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้แสดง
เนื้อหาของแอตทริบิวต์ type
ของอินพุตที่ระบุข้างต้นบนหน้าจอ
กำหนดอินพุตต่อไปนี้:
<input id="elem" type="email">
กำหนดปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้เขียน
ค่า submit ลงในแอตทริบิวต์ type
สมมติว่าคุณมีลิงก์ในรูปแบบแท็ก a
ปุ่ม และย่อหน้า เมื่อคลิกที่ปุ่ม ให้แสดง
เนื้อหาของแอตทริบิวต์ href ของลิงก์ในย่อหน้า
สมมติว่าคุณมีลิงก์และปุ่ม เมื่อคลิก
ที่ปุ่ม ให้เพิ่มเนื้อหาของแอตทริบิวต์ href
ของลิงก์เข้าไปที่ส่วนท้ายของข้อความลิงก์
ในวงเล็บ
สมมติว่าคุณมีรูปภาพ จัดวางมัน
บนหน้าโดยใช้แท็ก img
สมมติว่ามีปุ่มและย่อหน้าด้วย ทำให้
เมื่อคลิกที่ปุ่มในย่อหน้า จะเขียน
เส้นทางไปยังรูปภาพจากแอตทริบิวต์ src ของมัน
กำหนดรูปภาพในแท็ก img และปุ่ม
เมื่อคลิกที่ปุ่ม ให้เขียนค่า 300
ลงในแอตทริบิวต์ width
กำหนดรูปภาพในแท็ก img และปุ่ม
สมมติว่าในแอตทริบิวต์ width กำหนดความกว้าง
บางค่าไว้ สร้างปุ่มที่เมื่อคลิกแล้ว
ความกว้างของรูปภาพจะเพิ่มขึ้น 2
เท่า
สมมติว่าคุณมีรูปภาพสองภาพ สร้าง
แท็ก img บนหน้าและสองปุ่ม เมื่อ
คลิกที่ปุ่มแรกให้เขียนเส้นทาง
ไปยังรูปภาพแรกในแอตทริบิวต์ src และเมื่อคลิก
ที่ปุ่มที่สอง - เขียนเส้นทางไปยังรูปภาพที่สอง
