Apakah kegunaan atribut tersuai html5?

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 "df92f5aeab06e8a541b32e0addb993e8"; 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-*

atribut digunakan untuk Menyimpan data tersuai yang digunakan selepas halaman peribadi ialah atribut baharu dalam HTML5.

<element data-*="somevalue">

• somevalue: Tentukan nilai atribut (rentetan)

data-*

atribut boleh membenamkan data dalam semua elemen HTML .

Data tersuai boleh memberikan halaman pengalaman interaktif yang lebih baik (tidak perlu menggunakan Ajax atau data pertanyaan pada pelayan).

data-*

Atribut terdiri daripada dua bahagian berikut:

• Nama atribut tidak boleh mengandungi huruf besar dan mesti ada sekurang-kurangnya satu aksara selepas data- .

• nilai atribut, yang boleh berupa sebarang rentetan

Nota: Awalan atribut tersuai "data-" akan diabaikan oleh klien .

Anda boleh menggunakan set data untuk mendapatkan objek yang dibina oleh atribut data pada masa ini hanya dilaksanakan dalam sesetengah penyemak imbas seperti Chrome dan Opera Jika penyemak imbas lain perlu mendapatkan nilai atributnya, mereka perlu menggunakan getAttribute dan setAttribute untuk beroperasi.

Selagi kami mentakrifkan atribut tersuai kami dengan "data-" sebagai awalan dalam teg, ia boleh digunakan untuk menyimpan beberapa data.

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

Atribut data ini juga boleh digunakan dalam CSS, dengan syarat penyemak imbas anda menyokong kelas pseudo selepas dan atribut attr kandungan (versi IE yang lebih rendah tidak menyokongnya):

737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

Bagaimana untuk mendapatkan nilai atribut data?

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

1 Gunakan getAttribute untuk mendapatkan

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2 Gunakan Set Data objek atribut tersuai untuk mendapatkan

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

dom.style.borderColorNota: 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

, maka jika kita ingin mendapatkan nilai yang sepadan, kita boleh menggunakan: myp.dataset.otherAttribute

Jika elemen Html mentakrifkan berbilang atribut tersuai, bagaimana untuk dapatkannya?

89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba68

1. Gunakan gelung traversal

 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;
  }
}

dataset2 Gunakan atribut

var expense = document.getElementById('myDiv').dataset;

datasetNota: DOMStringMap对象 bukan tipikal. Objek JavaScript dalam erti kata, tetapi DOMStringMap,

ialah pembolehubah interaktif baharu dalam HTML5 yang mengandungi berbilang pasangan nilai nama

1), membenarkan semua nilai atribut tersuai disumbat ke dalam Dalam tatasusunan,

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

data属性2), padamkan

delete myDiv.dataset.attribute;

3, tambahkan atribut data

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

tidak dapat meningkatkan prestasi kod, ia sangat membantu untuk kod ringkas dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

[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!