home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีใช้ Custom Attributes ใน HTML: data-* attributes และ JavaScript

ใน HTML คุณสามารถสร้างแอตทริบิวต์แบบกำหนดเองได้ คุณสามารถใช้ CSS เพื่อจัดสไตล์ หรือ JavaScript เพื่อควบคุมพฤติกรรมของแอตทริบิวต์เหล่านั้น

คุณสามารถตั้งชื่อแอตทริบิวต์แบบกำหนดเองได้ตามต้องการ อย่างไรก็ตาม ชื่อแอตทริบิวต์แบบกำหนดเองต้องนำหน้าด้วยฉลาก data-:

<tag data-custom-attribute-name="value">Content</tag>

ตัวอย่าง ให้เรามีเอลิเมนต์อาหารชื่อ "Apple" เมื่อผู้ใช้คลิกที่มัน เราต้องการแสดงประเภทของอาหารในกล่องโต้ตอบป๊อปอัป

เพื่อทำเช่นนั้น เราจะสร้างแอตทริบิวต์แบบกำหนดเองชื่อ food-type (จำไว้ว่ามีฉลาก data-) และเพิ่มลงในเอลิเมนต์ <div> พร้อมข้อความ Apple ด้านใน:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Apple </div>

และ JavaScript ที่ทำให้ฟีเจอร์ทำงาน:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

นี่คือตัวอย่างสาธิต

วิธีการทำงานของโค้ด HTML:

  • ก่อนอื่น เราเพิ่มแอตทริบิวต์ onclick ให้กับเอลิเมนต์ <div> นี่คือแอตทริบิวต์เหตุการณ์ที่แนบ Event listener ที่ฟัง... คุณเดาถูกต้อง คือ การคลิก!
  • จากนั้นเรากำหนดค่าแอตทริบิวต์ showDetailsBox(this) ให้กับแอตทริบิวต์ onclick
  • showDetailsBox() คือชื่อฟังก์ชัน JavaScript ที่ถูกเรียกทันทีที่คุณคลิกที่เอลิเมนต์ข้อความ Apple
  • ส่วน this ของ (this) คืออาร์กิวเมนต์ที่อ้างถึงออบเจ็กต์ที่มันเป็นของ (this ค่อนข้างขั้นสูงสำหรับผู้เริ่มต้น ไม่เป็นไรหากไม่เข้าใจ)
  • id เป็นแอตทริบิวต์ HTML ในตัวที่ใช้ระบุ ID เฉพาะตัวสำหรับเอลิเมนต์ HTML ในกรณีนี้ ID เฉพาะของเราคือ apple

วิธีการทำงานของ โค้ด JavaScript อยู่นอกขอบเขตของบทช่วยสอน HTML นี้ ดังนั้นฉันจะให้คำอธิบายแบบง่ายๆ:

เมื่อฟังก์ชัน showDetailsBox() ถูกเรียกโดยแอตทริบิวต์เหตุการณ์ onclick มันจะรันบล็อกโค้ด { ... }:

function showDetailsBox(food) { ... }

บรรทัดแรกภายในบล็อกโค้ด JavaScript เลือกเอลิเมนต์ HTML ใดๆ ที่มีแอตทริบิวต์แบบกำหนดเอง data-food-type และกำหนดมัน (และค่าแอตทริบิวต์) ให้กับตัวแปรชื่อ foodType:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }

บรรทัดที่สองเรารันเมธอด alert() ในตัว (ที่แสดงกล่องโต้ตอบป๊อปอัพและบอกมันให้แสดงค่าของ foodType ซึ่งเป็น fruit แน่นอน:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

ไม่ต้องกังวลหากคุณไม่เข้าใจโค้ดตัวอย่างทั้งหมดข้างต้น มีรายละเอียดมากที่ต้องย่อย ทั้งอย่างนักสำหรับผู้เริ่มต้น ด้วยการฝึกฝน จะเข้าใจได้!

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ HTML แนะนำให้ขุดค้น MDN web docs HTML attribute reference

สำคัญ: อย่าเก็บเนื้อหาสำคัญที่ควรมองเห็นและเข้าถึงได้ภายใน data attributes เพราะเทคโนโลยี ช่วยเหลือ บางครั้งไม่เข้าถึงพวกเขา ตัวรวบรวมข้อมูลของเครื่องมือค้นหา อาจ ไม่จัดทำดัชนีค่า data attributes — ดังนั้นอย่าใส่เนื้อหา SEO สำคัญที่นี่