html5 atribut tersuai "data-*" digunakan untuk menyimpan data tersuai yang digunakan di belakang halaman peribadi dan data tersuai boleh memberikan halaman pengalaman interaktif yang lebih baik (tidak perlu menggunakan Ajax atau pergi ke pelayan) Pertanyaan data), sintaksnya ialah "
"; atribut "data-*" terdiri daripada dua bahagian: 1. Jangan sertakan huruf besar dalam nama atribut . -" mesti diikuti oleh sekurang-kurangnya satu aksara; 2. Nilai atribut, yang boleh berupa sebarang rentetan.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.
html5 atribut tersuai<code><span style="font-size: 18px;">data-*</span>
data-*
data-*
<element data-*="somevalue">
data-*
data-*
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
Bagaimana untuk mendapatkan nilai atribut data?
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;
dom.style.borderColor
Nota: dengan Sempang. nama perlu bersarung unta apabila digunakan, iaitu, ditulis dalam gabungan huruf besar dan kecil, yang serupa dengan objek gaya elemen aplikasi, data-other-attribute
. Sebagai contoh, atribut data ialah
Jika elemen Html mentakrifkan berbilang atribut tersuai, bagaimana untuk dapatkannya?
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j; for (i = 0, j = attrs.length; i < j; i++) { if(attrs[i].name.substring(0, 5) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }
dataset
2 Gunakan atribut
var expense = document.getElementById('myDiv').dataset;
dataset
Nota: DOMStringMap对象
bukan tipikal. Objek JavaScript dalam erti kata, tetapi DOMStringMap
,
var chartInput = []; for (var item in expense) { chartInput.push(expense[item]); }
data属性
2), padamkan
delete myDiv.dataset.attribute;
myDiv.dataset.attribute4 = 'value4';
Keserasian set data pemprosesan
Jika penyemak imbas tidak menyokong set data, perlu melakukan beberapa pemprosesan keserasian:if(myDiv.dataset) { myDiv.dataset.attribute = "valueXX"; // 设置自定义属性 var theValue = myDiv.dataset.attribute; // 获取自定义属性 } else { myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性 var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性 }
Kesimpulan:
dataset
Penggunaan data
OperasigetAttribute
adalah lebih perlahan daripada menggunakan dataset
Walaupun menggunakan
[Kursus yang disyorkan: Tutorial video HTML5, bahagian hadapan web
]Atas ialah kandungan terperinci Apakah kegunaan atribut tersuai html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!