ความคิดเห็น: HTML5 ได้เพิ่มคุณสมบัติใหม่ลงในแอตทริบิวต์ข้อมูลที่กำหนดเองนั่นคือคุณลักษณะ Data-* แบบกำหนดเอง ใน HTML5 เราสามารถใช้คำนำหน้ากับข้อมูล- เพื่อตั้งค่าคุณสมบัติที่กำหนดเองที่เราต้องการจัดเก็บข้อมูลบางอย่าง
แน่นอนในเบราว์เซอร์ขั้นสูงคุณสามารถกำหนดและเข้าถึงข้อมูลผ่านสคริปต์ มีประโยชน์มากในการปฏิบัติโครงการ
ตัวอย่างเช่น:
ใช้เมธอดแอ็ตทริบิวต์เพื่อเข้าถึงค่าของแอตทริบิวต์ข้อมูล-* ที่กำหนดเอง
สะดวกมากในการใช้วิธีการใช้งานแอตทริบิวต์เพื่อเข้าถึงค่าของแอตทริบิวต์ข้อมูล-* ที่กำหนดเอง:
// ใช้ getAttribute เพื่อรับข้อมูล- แอตทริบิวต์
var user = เอกสาร GetElementById ('ผู้ใช้');
ชื่อผู้ใช้ var = พืช getAttribute ('data-uname'); // username = 'Script House'
var userid = plant getAttribute ('data-uid'); // userId = '12345'
// ใช้ setAttribute เพื่อตั้งค่าข้อมูลข้อมูล
ผู้ใช้. setAttribute ('data-site', 'http://www.vevb.com');
วิธีนี้ใช้งานได้ดีในเบราว์เซอร์ที่ทันสมัยทั้งหมด แต่ไม่ใช่แอตทริบิวต์ข้อมูลที่กำหนดเอง-* ของ HTML 5 ที่ใช้สำหรับใช้งานมิฉะนั้นจะไม่แตกต่างจากแอตทริบิวต์ที่กำหนดเองที่เราใช้มาก่อนตัวอย่างเช่น:
<div id = "user" uid = "12345" uname = "Script House"> </div>
<script>
// ใช้ getAttribute เพื่อรับข้อมูล- แอตทริบิวต์
var user = เอกสาร GetElementById ('ผู้ใช้');
ชื่อผู้ใช้ var = พืช GetAttribute ('Uname'); // username = 'Script House'
var userid = plant getAttribute ('uid'); // userId = '12345'
// ใช้ setAttribute เพื่อตั้งค่าข้อมูลข้อมูล
ผู้ใช้. setAttribute ('เว็บไซต์', 'http://www.vevb.com');
</script>
แอตทริบิวต์ที่กำหนดเอง "ดั้งเดิม" นี้ไม่แตกต่างจากแอตทริบิวต์ Data-* ที่กำหนดเองด้านบนและชื่อแอตทริบิวต์ความรู้นั้นแตกต่างกัน
แอตทริบิวต์ชุดข้อมูลเข้าถึงค่าของข้อมูล-* แอตทริบิวต์ที่กำหนดเอง
ด้วยวิธีนี้เข้าถึงค่าแอตทริบิวต์ชุดข้อมูลของแอตทริบิวต์ข้อมูล-* ที่กำหนดเองโดยการเข้าถึงแอตทริบิวต์ชุดข้อมูลขององค์ประกอบ คุณสมบัติชุดข้อมูลนี้เป็นส่วนหนึ่งของ HTML5 JavaScript API และใช้เพื่อส่งคืนวัตถุ DomstringMap ด้วยข้อมูลองค์ประกอบที่เลือกทั้งหมด
เมื่อใช้วิธีนี้แทนที่จะใช้ชื่อแอตทริบิวต์ที่สมบูรณ์เช่น Data-UID ควรลบคำนำหน้าข้อมูล
หมายเหตุพิเศษอีกประการหนึ่งคือ: หากชื่อคุณลักษณะข้อมูลมียัติภังค์ตัวอย่างเช่น: ข้อมูลวันเกิดของการเกิดไฮฟีนจะถูกลบออกและแปลงเป็นการตั้งชื่อเหมือนอูฐ ชื่อแอตทริบิวต์ก่อนหน้านี้ควรได้รับการแปลง: DateofBirth
<div data-id = "1234567890" data-name = "Script House" data-date-of-birth> ประตู </div>
<script type = "text/javascript">
var el = document.querySelector ('#user');
console.log (el.id); // 'ผู้ใช้'
console.log (el.dataset); // a domstringMap
console.log (el.dataset.id); // '1234567890'
console.log (el.dataset.name); // 'Script House'
console.log (el.dataset.dateofbirth); -
El.Dataset.dateOfBirth = '1985-01-05'; // กำหนดค่าของข้อมูลวันที่เกิด
console.log ('somedataattr' ใน el.dataset); // false
El.Dataset.somedataattr = 'MyData';
console.log ('somedataattr' ใน el.dataset); // true
</script>
หากคุณต้องการลบการจัดหาข้อมูลคุณสามารถทำได้: ลบ EL ชุดข้อมูล id; หรือ El .dataset id = null; -
มันดูสวยงามฮ่าฮ่า แต่น่าเสียดายที่แอตทริบิวต์ชุดข้อมูลใหม่ถูกนำไปใช้ใน Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ เบราว์เซอร์ Safari 6+ ดังนั้นการใช้งานที่ดีที่สุด
เกี่ยวกับตัวเลือกการจัดหาข้อมูล
ในการพัฒนาจริงคุณอาจพบว่ามีประโยชน์คุณสามารถเลือกองค์ประกอบที่เกี่ยวข้องตามแอตทริบิวต์ข้อมูลที่กำหนดเองของคุณ ตัวอย่างเช่นใช้ QuerySelectorAll เพื่อเลือกองค์ประกอบ:
// เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์
เอกสาร . querySelectorall ('[[data-flowering]');
// เลือกองค์ประกอบทั้งหมดด้วยค่าแอตทริบิวต์ 'ข้อมูลข้อความสี' สีแดง
เอกสาร . querySelectorAll ('[ข้อมูล-ข้อความสี = "สีแดง"]');
ในทำนองเดียวกันเรายังสามารถตั้งค่าสไตล์ CSS สำหรับองค์ประกอบที่เกี่ยวข้องผ่านค่าข้อมูล- เช่นตัวอย่างต่อไปนี้:
<style type = "text/css">
.user {
ความกว้าง: 256px;
ความสูง: 200px;
-
.user [data-name = 'feiwen'] {
สี: สีน้ำตาล
-
.user [data-name = 'css'] {
สี: สีแดง
-
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "user" data-id = "124" data-name = "css"> ท่าเรือ </div>