Rumah > Artikel > hujung hadapan web > Analisis komprehensif atribut standard dan atribut tersuai dalam kemahiran tutorial HTML5_html5
Seperti yang dijelaskan dalam sintaks HTML5, elemen boleh mengandungi atribut untuk menetapkan pelbagai sifat untuk elemen.
Sesetengah sifat ditakrifkan sebagai global dan boleh digunakan pada mana-mana elemen, manakala yang lain ditakrifkan sebagai khusus unsur. Semua sifat mempunyai nama dan nilai, yang kelihatan seperti contoh di bawah.
Berikut ialah contoh menggunakan atribut HTML5, menunjukkan cara menandakan elemen div dengan atribut bernama kelas dan nilai "contoh":
AtributAtribut HTML5 tidak sensitif huruf besar dan boleh digunakan dalam semua huruf besar atau gabungan huruf besar dan huruf kecil, walaupun konvensyen yang paling biasa ialah sentiasa menggunakan huruf kecil.
Atribut Standard
Atribut yang disenaraikan di bawah disokong oleh hampir semua teg HTML5.
属性 | 选项 | 功能 |
accesskey | 用户自定义 | 定义访问元素的键盘快捷键。 |
align | right, left, center | 水平对齐标签。 |
background | URL | 在元素后面设置一个背景图像。 |
bgcolor | 数值,十六进制值,RGB值 | 在元素后面设置一个背景颜色。 |
class | 用户定义。 | 分类一个元素,便于使用级联样式表。 |
contenteditable | true, false | 定义用户是否可以编辑元素的内容。 |
contextmenu | Menu id | 为元素定义上下文菜单。 |
data-XXXX | 用户定义。 | 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。 |
draggable | true,false, auto | 定义用户是否可以拖动元素。 |
height | 数字值 | 定义表格,图像或表格单元的高度。 |
hidden | hidden | 定义元素是否应该可见。 |
id | 用户定义。 | 命名元素,便于使用级联样式表。 |
item | 元素列表。 | 用于组合元素。 |
itemprop | 条目列表。 | 用于组合条目。 |
spellcheck | true, false | 定义元素是否必须有拼写或错误检查。 |
style | CSS 样式表。 | 给元素定义内联样式。 |
subject | 用户定义 id。 | 定义元素关联的条目。 |
tabindex | Tab number | 定于元素的 tab 键顺序。 |
title | 用户定义。 | 元素的“弹出”标题。 |
valign | top, middle, bottom | HTML 元素内标签的垂直对齐方式。 |
width | 数字值。 | 定义表格,图像和表格单元的宽度。 |
Atribut tersuai
HTML5 juga memperkenalkan ciri baharu, iaitu keupayaan untuk menambah atribut data tersuai.
Atribut data tersuai bermula dengan data- dan dinamakan berdasarkan keperluan kami. Berikut ialah contoh mudah:
Tambahkan atribut tersuai pada elemen HTML dan aksesnya melalui JavaScript Jika anda telah mencubanya sebelum ini, anda akan mendapati bahawa pengesahan teg adalah mudah dan HTML5 boleh memberi anda keupayaan untuk mencipta dan menggunakan elemen anda sendiri dalam. halaman web yang sah.
Buat fail HTML5:
Jika anda belum memutuskan yang mana satu untuk digunakan, anda boleh menyalin kod di bawah:
Tetapkan elemen tersuai dalam badan dan aksesnya menggunakan elemen JavaScript dalam kawasan skrip kepala.
Buat elemen:
Mula-mula, tambahkan beberapa kandungan dan elemen ringkas seperti atribut tersuai dan ID supaya kami boleh mengenal pasti contoh JavaScript.
Seperti yang anda lihat, atribut tersuai mempunyai bentuk: "data-*", tetapkan nama dalam bahagian "data-" atau nama pilihan anda. Gunakan atribut tersuai dalam HTML5, ini adalah satu-satunya cara yang berkesan. Oleh itu, hanya gunakan kaedah ini jika anda ingin mengesahkan sama ada halaman web itu sah.
Sudah tentu, butiran projek menentukan sama ada harta tersuai berguna kepada anda dan cara anda menamakannya. Contoh ini boleh digunakan pada tapak web runcit merentas kategori produk yang berbeza.
Atribut tersuai membolehkan anda menggunakan kod JavaScript dalam halaman untuk menetapkan elemen dengan cara yang istimewa, contohnya, untuk menghidupkan fungsi paparan. Jika tiada unsur HTML standard, kami mengesyorkan anda menggunakan atribut tersuai.
Tambah butang ujian
Gunakan elemen JavaScript anda sendiri pada halaman untuk melaksanakan acara, dengan syarat kod berikut ditambahkan pada halaman:
Dapatkan atribut:
Cara paling biasa untuk mengakses atribut dalam JavaScript ialah menggunakan "getAttributes", yang juga merupakan langkah pertama yang perlu kita lakukan. Tambahkan fungsi berikut dalam kawasan skrip kepala halaman:
Di sini, kami telah menambah nilai amaran pada contoh Sudah tentu, anda juga boleh menambahnya dalam skrip mengikut keperluan anda sendiri.
Dapatkan data:
Anda boleh menggunakan set data elemen dan bukannya DOM "getAttributes", yang mungkin lebih cekap, terutamanya dalam kes tertentu di mana kod itu berulang melalui berbilang atribut Walau bagaimanapun, sokongan penyemak imbas untuk set data masih sangat rendah , kod ini melaksanakan proses yang sama seperti kaedah // selepas.
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory; Masih termasuk dalam HTML.
Modul dan fungsi lain
Kami telah memperoleh harta itu, skrip masih boleh menetapkan dan mengeluarkannya. Kod di bawah menunjukkan cara menetapkan sifat menggunakan modul dan set data JavaScript standard.