التعليق: أضافت HTML5 ميزة جديدة إلى سمات البيانات المخصصة ، أي السمات المخصصة للبيانات. في HTML5 ، يمكننا استخدام البادئة مع البيانات- لتعيين الخصائص المخصصة التي نحتاجها لتخزين بعض البيانات
بالطبع ، في المتصفحات المتقدمة ، يمكنك تحديد البيانات والوصول إليها من خلال البرامج النصية. مفيد جدا في ممارسة المشروع.
على سبيل المثال:
استخدم طريقة السمة للوصول إلى قيمة السمة المخصصة للبيانات-
من المريح للغاية استخدام طريقة السمات للوصول إلى قيمة السمة المخصصة للبيانات:
// استخدم getAttribute للحصول على سمة البيانات
var user = document. getElementByid ('المستخدم') ؛
var اسم المستخدم = النبات. getAttribute ('data-uname') ؛ // username = 'Script House'
var userId = مصنع. getAttribute ('data-uid') ؛ // userid = '12345'
// استخدم setAttribute لتعيين properties
مستخدم . setAttribute ('data-site' ، 'http://www.vevb.com') ؛
تعمل هذه الطريقة بشكل جيد في جميع المتصفحات الحديثة ، ولكنها ليست السمة المخصصة للبيانات-* من HTML 5 التي يتم استخدامها للاستخدام ، وإلا فلن يختلف عن السمات المخصصة التي استخدمناها من قبل ، على سبيل المثال:
<div id = "user" uid = "12345" uname = "script house"> </iv>
<script>
// استخدم getAttribute للحصول على سمة البيانات
var user = document. getElementByid ('المستخدم') ؛
var اسم المستخدم = النبات. getAttribute ('uname') ؛ // username = 'Script House'
var userId = مصنع. getAttribute ('uid') ؛ // userid = '12345'
// استخدم setAttribute لتعيين properties
مستخدم . setAttribute ('site' ، 'http://www.vevb.com') ؛
</script>
لا تختلف هذه السمة "الأصلية" المخصصة عن السمة المخصصة للبيانات أعلاه ، وأسماء سمات المعرفة مختلفة.
تصل سمة مجموعة البيانات إلى قيمة السمة المخصصة*
وبهذه الطريقة ، يصل إلى قيمة سمة مجموعة البيانات السمة المخصصة للبيانات-عن طريق الوصول إلى سمة مجموعة البيانات لعنصر ما. خاصية مجموعة البيانات هذه هي جزء من واجهة برمجة تطبيقات HTML5 JavaScript وتستخدم لإرجاع كائن DomStringMap مع جميع سمات بيانات العناصر المحددة.
عند استخدام هذه الطريقة ، بدلاً من استخدام اسم السمة الكامل ، مثل بيانات البيانات ، يجب إزالة بادئة البيانات.
ملاحظة خاصة أخرى هي: إذا كان اسم السمة للبيانات يحتوي على الواصلة ، على سبيل المثال: Data-Date-Of Birth ، ستتم إزالة الواصلة وتحويلها إلى تسمية تشبه الجمال. يجب تحويل اسم السمة السابق: DateOfbirth.
<div data-id = "1234567890" data-name = "script house" data-of-birth> door </viv>
<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. مجموعة البيانات. بطاقة تعريف ؛ أو el .Dataset. id = null ؛ .
يبدو جميلًا ، هاها ، ولكن لسوء الحظ ، يتم تنفيذ سمة مجموعة البيانات الجديدة فقط في Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ متصفحات ، وبالتالي فإن أفضل استخدام و setattribute للعمل خلال هذه الفترة.
حول محدد تمارين البيانات
في التطوير الفعلي ، قد تجدها مفيدة ، يمكنك تحديد العناصر ذات الصلة بناءً على سمة البيانات المخصصة. على سبيل المثال ، استخدم QuerySelectorAllesho لتحديد العناصر:
// حدد جميع العناصر التي تحتوي على سمة "زهرة البيانات"
وثيقة . QuerySeLectorAll ('[flowering data]') ؛
// حدد جميع العناصر مع قيمة سمة "بيانات النص" الأحمر
وثيقة . QuerySelectorAll ('[data-text-colour = "red"]') ؛
وبالمثل ، يمكننا أيضًا تعيين أنماط CSS للعناصر المقابلة من خلال قيمة السمة البيانات ، مثل المثال التالي:
<type type = "text/css">
.مستخدم {
العرض: 256 بكسل ؛
الارتفاع: 200 بكسل ؛
}
.user [data-name = 'feiwen'] {
اللون: بني
}
.user [data-name = 'css'] {
اللون: أحمر
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </viv>
<div class = "user" data-id = "124" data-name = "css"> pier </iv>