Komentar: Ketika Anda berbicara tentang "html5" di tengah orang banyak, Anda mungkin merasa seperti penari eksotis atau unicorn yang datang ke tengah rumah dengan makna yang jelas dari "Saya keren, saya tahu itu"
Ini tidak dapat dikatakan bahwa kita sia -sia. API HTML dasar belum berkembang dalam beberapa tahun terakhir, sehingga ketika fitur baru yang kecil muncul, seperti placeholder, itu akan memberi kita tampilan baru. Meskipun banyak fitur HTML5 diimplementasikan di browser baru, sebagian besar pemrogram masih belum tahu atau belum pernah mendengar tentang API kecil yang sangat berguna. Dalam artikel ini, saya akan memperkenalkan beberapa API seperti itu dan menyambut semua orang untuk menemukan HTML5 API yang lebih tidak diketahui!
Element.ClassList
API ClassList menyediakan fungsi dasar mengendalikan CSS yang telah kami terapkan selama bertahun -tahun menggunakan Perpustakaan Alat JavaScript:
// Tambahkan kelas CSS
myelement.classlist.add ("newclass");
// Hapus kelas CSS
myelement.classlist.remove ("yang ada class");
// Periksa apakah Anda memiliki kelas CSS
myelement.classlist.contains ("oneClass");
// membalikkan keberadaan atau tidak dari kelas CSS
myelement.classlist.toggle ("class lain");
Nilai utama API yang baru muncul ini adalah: sederhana dan praktis.
API ContextMenu
API ContextMenu baru ini sangat berguna: tidak menggantikan menu klik kanan asli, tetapi menambahkan menu klik kanan khusus Anda ke menu klik kanan di browser:
<Bagian contactionMenu = "mymenu">
<!-Tambahkan menu->
<type menu = "konteks">
<label MenuUtem = "Refresh Post" Icon = "/Images/Refresh-Icon.png"> </Sisuitem>
<label menu = "Bagikan di ..." ikon = "/gambar/shar_icon.gif">
<label MenuUtem = "twitter" ikon = "/gambar/twitter_icon.gif"> </sisuitem>
<menuUtem label = "facebook" icon = "/gambar/facebook_icon16x16.gif"> </sisuitem>
</u menu>
</u menu>
</section>
Perlu dicatat bahwa yang terbaik adalah menggunakan JavaScript untuk membuat kode menu ini secara dinamis, karena acara menu pada akhirnya akan memanggil JavaScript untuk menjalankan tugas. Jika pengguna melarang JavaScript, menu klik kanan tidak akan dihasilkan, dan dia tidak akan melihat menu pada saat yang sama.
Element.dataset
Menggunakan API Dataset, pemrogram dapat dengan mudah mendapatkan atau mengatur data-* Properti Kustom:
/* Kode berikut adalah contoh
<Div Data-name = "myDiv" data-id = "myid" data-custom-key = "Ini adalah nilai"> </div>
*/
// Dapatkan elemen
var element = document.geteLementById ("myDiv");
// Dapatkan ID
var id = element.dataset.id;
// Baca nilai "Data-My-Custom-Key"
var customKey = element.dataset.mycustomkey;
// Ubah ke nilai lain
element.dataset.mycustomkey = "beberapa nilai lain";
// Turn Out:
// <Div Data-name = "myDiv" data-id = "myid" data-my-custom-key = "beberapa nilai lain"> </div>
Tak perlu dikatakan, itu sesederhana dan praktis seperti daftar kelas
Window.PostMessage API
Bahkan IE8 telah mendukung API postmessage selama bertahun -tahun. Fungsi API postmessage adalah memungkinkan Anda untuk memberikan data informasi antara dua jendela browser atau iframe:
// dari jendela atau iframe di domain a, kirim pesan ke jendela atau ifame di domain B.
var iframewindow = document.getElementById ("iframe"). ContentWindow;
iframewindow.postmessage ("Salam dari jendela pertama!"); </p> <p> // menerima pesan di jendela atau iframe pada domain berbeda kedua yang berbeda
window.addeventListener ("pesan", fungsi (event) {
// uji legalitas domain
if (event.origin == "http://www.vevb.com") {
// Informasi log keluaran
console.log (event.data);
// pesan umpan balik
event.source.postmessage ("Bagaimana kabarmu baik -baik saja!");
}
]);
Badan pesan hanya bisa menjadi string, tetapi Anda dapat menggunakan json.stringify dan json.parse untuk mengubah pesan menjadi badan data yang lebih bermakna!
atribut autofocus
Atribut fokus otomatis dapat membuat elemen tombol, input, atau textArea secara otomatis menjadi fokus halaman saat halaman dimuat:
<input autofocus = "autofocus" />
<tombol autofocus = "autofocus"> hai! </button>
<textarea autofocus = "autofocus"> </textarea>
Di tempat -tempat seperti halaman pencarian Google dengan pola tetap, properti fokus otomatis adalah fitur yang ideal.
Browser mendukung setiap API sedikit berbeda, jadi periksa dukungan untuk fitur -fitur ini sebelum menggunakannya. Luangkan waktu untuk membaca deskripsi terperinci dari setiap API, dan saya yakin Anda akan menemukan lebih banyak.