คำอธิบายโดยละเอียดของข้อมูล HTML5-* แอตทริบิวต์ที่กำหนดเอง

ใน attr และ prop ของ jQuery มีการกล่าวถึงการใช้คุณสมบัติที่ไม่เหมาะสมในเวอร์ชันก่อน IE9 จะทำให้หน่วยความจำรั่ว และความแตกต่างระหว่าง Attribute และ Property ก็เป็นปัญหาเช่นกัน ใน HTML5 วิธีการ data-* จะถูกเพิ่มเพื่อปรับแต่งแอตทริบิวต์ สิ่งที่เรียกว่า data-* จริงๆ แล้วคือคำนำหน้าข้อมูลบวกกับชื่อแอตทริบิวต์ที่กำหนดเอง ข้อมูลสามารถจัดเก็บได้โดยใช้โครงสร้างดังกล่าว การใช้ data-* สามารถแก้ไขสถานการณ์ปัจจุบันของแอตทริบิวต์ที่กำหนดเองที่สับสนและไม่มีการจัดการได้

data-* มีวิธีการตั้งค่าสองวิธี ซึ่งสามารถเขียนได้โดยตรงบนแท็กองค์ประกอบ HTML

 <div id=test data-age=24> คลิกที่นี่ </div>

ยุคข้อมูลเป็นแอตทริบิวต์ที่กำหนดเอง แน่นอนว่าเราสามารถดำเนินการผ่าน JavaScript ได้เช่นกัน องค์ประกอบใน HTML5 จะมีแอตทริบิวต์ชุดข้อมูลซึ่งเป็นชุดของคู่คีย์-ค่าประเภท DOMStringMap

 var test = document.getElementById('test'); test.dataset.my = 'ไบรอน';

สิ่งนี้จะเพิ่มแอตทริบิวต์ที่กำหนดเองของ data-my ไปยัง div มีสองสิ่งที่ต้องคำนึงถึงเมื่อใช้ JavaScript เพื่อดำเนินการชุดข้อมูล

1. เราจำเป็นต้องลบข้อมูลนำหน้า-* เมื่อเพิ่มหรืออ่านแอตทริบิวต์ เช่นเดียวกับตัวอย่างข้างต้น เราไม่ใช้แบบฟอร์ม test.dataset.data-my = 'Byron';

2. หากชื่อแอตทริบิวต์มียัติภังค์ (-) จะต้องแปลงเป็นการตั้งชื่อตัวพิมพ์เล็ก ๆ แต่หากใช้ตัวเลือกใน CSS เราจำเป็นต้องใช้รูปแบบยัติภังค์

เพิ่มเนื้อหาลงในโค้ดทันที

 <style type=text/css> [ข้อมูลวันเกิด] { สีพื้นหลัง: #0f0; width:100px; ระยะขอบ:20px; } </style>

 test.dataset.birthDate = '19890615';

ด้วยวิธีนี้ เราตั้งค่าแอตทริบิวต์ที่กำหนดเอง data-birth-date ผ่าน JavaScript และเพิ่มสไตล์บางอย่างให้กับ div ในสไตล์ชีต CSS เพื่อดูเอฟเฟกต์

เมื่ออ่านก็จะผ่านวัตถุชุดข้อมูลโดยใช้ . เพื่อรับคุณลักษณะ จำเป็นต้องลบคำนำหน้าข้อมูลด้วย และเครื่องหมายยัติภังค์จะต้องถูกแปลงเป็นการตั้งชื่อตัวพิมพ์แบบอูฐ

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; test.onclick = ฟังก์ชั่น () { การแจ้งเตือน (this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate); }

นักเรียนบางคนอาจถามว่ามีความแตกต่างระหว่างสิ่งนี้กับ getAttribute/setAttribute ยกเว้นการตั้งชื่อหรือไม่ มาดูกันดีกว่า

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('อายุ', 25); test.setAttribute('data-sex', 'ชาย'); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex); //ชาย

จากนี้เราจะเห็นว่าทั้งคู่ตั้งค่าแอตทริบิวต์เป็นแอตทริบิวต์ (ไร้สาระ ไม่อย่างนั้นก็สามารถเรียกแอตทริบิวต์เหล่านี้ได้) ซึ่งหมายความว่า getAttribute/setAttribute สามารถดำเนินการกับเนื้อหาชุดข้อมูลทั้งหมดได้ และเนื้อหาชุดข้อมูลเป็นเพียงชุดย่อยของแอตทริบิวต์เท่านั้น สิ่งคือการตั้งชื่อ แต่มีเพียงแอตทริบิวต์ที่มีคำนำหน้าข้อมูลในชุดข้อมูล (ไม่มีอายุ = 25)

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

ข่าวร้ายก็คือความเข้ากันได้ของเบราว์เซอร์ของ data-* ถือเป็นแง่ร้ายมาก

1. อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 11+
2. โครม 8+
3. ไฟร์ฟอกซ์ 6.0+
4. โอเปร่า 11.10+
5. ซาฟารี 6+

ในหมู่พวกเขา IE11+ กำลังทำให้เพื่อนของฉันมองไม่เห็น ดูเหมือนว่าหนทางยังอีกยาวไกลในการใช้คุณลักษณะนี้อย่างเต็มที่

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network