Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah kegunaan atribut tersuai html5?

Apakah kegunaan atribut tersuai html5?

青灯夜游
Lepaskan: 2022-08-01 17:02:43
asal
1945 orang telah melayarinya

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.

Apakah kegunaan atribut tersuai html5?

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">
Salin selepas log masuk
  • 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.
<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
Salin selepas log masuk
Salin selepas log masuk

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):
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
Salin selepas log masuk
#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}
Salin selepas log masuk

Bagaimana untuk mendapatkan nilai atribut data?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
Salin selepas log masuk
Salin selepas log masuk

1 Gunakan getAttribute untuk mendapatkan
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
Salin selepas log masuk

2 Gunakan Set Data objek atribut tersuai untuk mendapatkan
var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;
Salin selepas log masuk

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?

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
Salin selepas log masuk

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) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}
Salin selepas log masuk

dataset2 Gunakan atribut

var expense = document.getElementById(&#39;myDiv&#39;).dataset;
Salin selepas log masuk

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]);
}
Salin selepas log masuk

data属性2), padamkan

delete myDiv.dataset.attribute;
Salin selepas log masuk

3, tambahkan atribut data
myDiv.dataset.attribute4 = &#39;value4&#39;;
Salin selepas log masuk

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"); // 获取自定义属性
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan