คุณลักษณะที่กำหนดเองใน JavaScript

ใน HTML อนุญาตให้เพิ่มคุณลักษณะของคุณเองได้ คุณลักษณะดังกล่าวต้องขึ้นต้นด้วย data- และตามด้วยชื่อ คุณลักษณะใดๆ ที่สะดวกสำหรับคุณ

คุณลักษณะที่กำหนดเองสามารถใช้งานได้ หลากหลายวิธีมาก หลายวิธีเราจะศึกษาในภายหลังใน บทเรียน และอีกมากมายคุณจะสามารถคิดค้นเองได้ ในอนาคต

การอ้างอิงถึงคุณลักษณะดังกล่าวไม่ได้ทำงานแบบ มาตรฐาน คุณไม่สามารถอ้างถึงคุณสมบัติขององค์ประกอบ ที่ชื่อตรงกันได้อย่างง่ายดาย อย่างที่เราทำมา แต่ควรใช้คุณสมบัติพิเศษ dataset หลังจากนั้นใส่จุด และเขียนชื่อคุณลักษณะโดยไม่มี data- เช่น หากคุณลักษณะของเราชื่อ data-test การอ้างอิงถึงมัน เราจะเขียน elem.dataset.test โดยที่ elem เป็นตัวแปรขององค์ประกอบของเรา

มาดูตัวอย่างกัน สมมติว่าเรา มีองค์ประกอบดังนี้:

<div id="elem" data-num="1000"></div>

แสดงค่าของคุณลักษณะ data-num บนหน้าจอ:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // จะแสดง 1000

และกำหนดค่าใหม่ให้กับคุณลักษณะนี้:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

มีโค้ดต่อไปนี้:

<div id="elem" data-text="str">text</div>

ทำให้เมื่อคลิกที่ div เนื้อหาของ คุณลักษณะ data-text ถูกเพิ่มไปที่ส่วนท้ายของข้อความของมัน

มี divs ซึ่งประกอบด้วยเลขลำดับ ในคุณลักษณะ data-num:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

ทำให้เมื่อคลิกที่ div ใดๆ เลขลำดับของมันถูกเขียนที่ส่วนท้าย

มีปุ่ม ทำให้นับจำนวนการคลิก บนปุ่มนี้ โดยบันทึกลงใน คุณลักษณะที่กำหนดเองบางอย่าง เมื่อคลิกที่ปุ่มอื่นบน หน้าจอแสดงว่ามีการคลิกกี่ครั้ง บนปุ่มแรก

มี input:

<input id="elem" data-length="5">

ใน input นี้ คุณลักษณะ data-length มีจำนวนตัวอักษรที่ต้อง ป้อนใน input ทำให้เมื่อเสีย โฟกัส หากจำนวนอักขระที่ป้อน ไม่ตรงกับที่กำหนด ให้แสดงข้อความ เกี่ยวกับเรื่องนี้

มี input:

<input id="elem" data-min="5" data-max="10">

ใน input นี้ คุณลักษณะ data-min และ data-max มีช่วง ทำ ให้เมื่อเสียโฟกัส หากจำนวน อักขระที่ป้อนไม่อยู่ในช่วงนี้ ให้แสดงข้อความเกี่ยวกับเรื่องนี้