วิธีใช้แอตทริบิวต์ที่กำหนดเองใน HTML

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

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

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

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

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

โค้ด JavaScript . เป็นอย่างไร ผลงานอยู่นอกเหนือขอบเขตของบทช่วยสอน HTML นี้ ดังนั้นฉันจะให้คำอธิบายที่เข้าใจง่าย:

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

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 ฉันขอแนะนำให้ดูข้อมูลอ้างอิงแอตทริบิวต์ HTML ของเอกสารเว็บ MDN

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