แอตทริบิวต์ของแท็กเป็นคุณสมบัติใน JavaScript

ตอนนี้เรามาเรียนรู้วิธีการเข้าถึงแอตทริบิวต์ ของแท็กกัน กฎที่ใช้คือ: แต่ละแอตทริบิวต์ของแท็กจะตรงกับคุณสมบัติของ DOM element ที่มีชื่อเดียวกัน

มาดูตัวอย่างกัน สมมติว่าเรามีแท็กแบบนี้:

html<input id="elem" type="text">

เราจะได้ลิงก์ไปยัง element ของเราในตัวแปร:

javascriptlet elem = document.querySelector('#elem');

มาแสดงค่าของแอตทริบิวต์ที่เราต้องการ:

javascriptconsole.log(elem.id);   // จะแสดง 'elem'
console.log(elem.type); // จะแสดง 'text'

และตอนนี้ลองเปลี่ยนค่าของแอตทริบิวต์เป็นตัวอย่าง:

javascriptelem.type = 'submit';
Задание 1

กำหนดอินพุตต่อไปนี้:

html<input id="elem" type="email">

กำหนดปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้แสดง เนื้อหาของแอตทริบิวต์ type ของอินพุตที่ระบุข้างต้นบนหน้าจอ

Задание 2

กำหนดอินพุตต่อไปนี้:

html<input id="elem" type="email">

กำหนดปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้เขียน ค่า submit ลงในแอตทริบิวต์ type

Задание 3

สมมติว่าคุณมีลิงก์ในรูปแบบแท็ก a ปุ่ม และย่อหน้า เมื่อคลิกที่ปุ่ม ให้แสดง เนื้อหาของแอตทริบิวต์ href ของลิงก์ในย่อหน้า

Задание 4

สมมติว่าคุณมีลิงก์และปุ่ม เมื่อคลิก ที่ปุ่ม ให้เพิ่มเนื้อหาของแอตทริบิวต์ href ของลิงก์เข้าไปที่ส่วนท้ายของข้อความลิงก์ ในวงเล็บ

Задание 5

สมมติว่าคุณมีรูปภาพ จัดวางมัน บนหน้าโดยใช้แท็ก img สมมติว่ามีปุ่มและย่อหน้าด้วย ทำให้ เมื่อคลิกที่ปุ่มในย่อหน้า จะเขียน เส้นทางไปยังรูปภาพจากแอตทริบิวต์ src ของมัน

Задание 6

กำหนดรูปภาพในแท็ก img และปุ่ม เมื่อคลิกที่ปุ่ม ให้เขียนค่า 300 ลงในแอตทริบิวต์ width

Задание 7

กำหนดรูปภาพในแท็ก img และปุ่ม สมมติว่าในแอตทริบิวต์ width กำหนดความกว้าง บางค่าไว้ สร้างปุ่มที่เมื่อคลิกแล้ว ความกว้างของรูปภาพจะเพิ่มขึ้น 2 เท่า

Задание 8

สมมติว่าคุณมีรูปภาพสองภาพ สร้าง แท็ก img บนหน้าและสองปุ่ม เมื่อ คลิกที่ปุ่มแรกให้เขียนเส้นทาง ไปยังรูปภาพแรกในแอตทริบิวต์ src และเมื่อคลิก ที่ปุ่มที่สอง - เขียนเส้นทางไปยังรูปภาพที่สอง