ใน 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นักเรียนบางคนอาจถามว่ามีความแตกต่างระหว่างสิ่งนี้กับ 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-* ถือเป็นแง่ร้ายมาก
ในหมู่พวกเขา IE11+ กำลังทำให้เพื่อนของฉันมองไม่เห็น ดูเหมือนว่าหนทางยังอีกยาวไกลในการใช้คุณลักษณะนี้อย่างเต็มที่
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network