Meskipun sejarah JavaScript yang menggunakan blok kode yang panjang dan membosankan untuk menargetkan browser tertentu sudah berakhir, terkadang masih perlu menggunakan beberapa blok kode sederhana dan deteksi objek untuk memastikan bahwa beberapa kode berfungsi dengan benar di mesin pengguna.
Pada artikel ini, saya akan menguraikan 7 perbedaan sintaksis JavaScript antara Internet Explorer dan Firefox.
1. Properti “mengambang” CSS
Sintaks dasar untuk mendapatkan properti CSS tertentu dari objek tertentu adalah properti object.style, dan properti yang diberi tanda hubung menggunakan notasi unta sebagai gantinya. Misalnya, untuk mendapatkan atribut warna latar belakang div dengan ID "header", kita perlu menggunakan sintaks berikut:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
Namun karena "float" adalah kata khusus dalam JavaScript, kita tidak dapat menggunakan object.style.float untuk mendapatkan atribut "float". Inilah cara kami menggunakannya di kedua browser:
Sintaks IE:
document.getElementById("header").style.styleFloat = "kiri";
Sintaks Firefox:
document.getElementById("header").style.cssFloat = "kiri";
2. Gaya perhitungan elemen
Dengan menggunakan properti object.style.property di atas, JavaScript dapat dengan mudah mendapatkan dan memodifikasi gaya CSS kumpulan objek. Namun keterbatasan sintaksis ini adalah ia hanya dapat memperoleh gaya sebaris dalam HTML, atau gaya yang disetel langsung menggunakan JavaScript. Objek gaya tidak dapat memperoleh kumpulan gaya menggunakan lembar gaya eksternal. Untuk mendapatkan "gaya terhitung" suatu objek, kita menggunakan kode berikut:
Sintaks IE:
var myObject = dokumen.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
Sintaks Firefox:
var myObject = dokumen.getElementById("header");
var myComputedStyle = dokumen.defaultView.getComputedStyle(objek saya, null);
var myStyle = myComputedStyle.backgroundColor;
3. Dapatkan atribut "kelas" dari elemen tersebut
Mirip dengan atribut "float", kedua browser menggunakan metode JavaScript yang berbeda untuk mendapatkan atribut ini.
Sintaks IE:
var myObject = dokumen.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Sintaks Firefox:
var myObject = dokumen.getElementById("header");
var myAttribute = myObject.getAttribute("kelas");
4. Mendapatkan atribut "for" pada label
sama dengan 3. Menggunakan JavaScript untuk mendapatkan atribut "for" pada label juga memiliki sintaks yang berbeda.
Sintaks IE:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
var
myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
Sintaks yang sama digunakan untuk metode setAtrribute.
5. Mendapatkan posisi kursor
Jarang sekali mendapatkan posisi kursor suatu elemen. Jika perlu melakukan ini, sintaks IE dan Firefox juga berbeda. Kode contoh ini cukup mendasar dan biasanya digunakan sebagai bagian dari banyak pengendali kejadian yang kompleks dan hanya digunakan untuk menjelaskan perbedaannya. Perlu dicatat bahwa hasil di IE berbeda dengan di Firefox, jadi ada beberapa masalah dengan metode ini. Seringkali, perbedaan ini dapat dikompensasi dengan mendapatkan "posisi gulir" - tapi itu adalah topik untuk artikel lain.