Perbezaan dalam sintaks JavaScript antara petua IE dan Firefox_javascript

Walaupun hari bersejarah JavaScript menggunakan blok kod yang panjang dan menjengkelkan untuk menyasarkan penyemak imbas tertentu telah berakhir, penggunaan sesekali beberapa blok kod mudah dan pengesanan objek untuk memastikan beberapa kod berfungsi dengan betul pada mesin pengguna masih Diperlukan.

Dalam artikel ini, saya akan menggariskan secara ringkas 7 aspek sintaks JavaScript antara Internet Explorer dan Firefox.

1. Atribut "terapung" CSS

Sintaks asas untuk mendapatkan sifat CSS khusus untuk objek tertentu ialah object.style property dan sifat sempang digantikan dengan notasi unta. Contohnya, untuk mendapatkan atribut warna latar belakang div dengan ID "header", kami menggunakan sintaks berikut:

Salin kod Kod adalah seperti berikut:

document.getElementById("header").style.borderBottom = "1px pepejal #ccc";

Tetapi memandangkan "float" ialah perkataan terpelihara dalam JavaScript, kami tidak boleh menggunakan object.style.float untuk mendapatkan atribut "float". Begini cara kami menggunakannya dalam dua penyemak imbas:

Sintaks IE:

Salin kod Kod adalah seperti berikut:

document.getElementById("header").style.styleFloat = "kiri ";

Sintaks Firefox:

Salin kod Kod adalah seperti berikut:

document.getElementById("header").style.cssFloat = "kiri ";

2. Gaya pengiraan elemen

Dengan menggunakan object.style.property di atas, JavaScript boleh mendapatkan dan mengubah suai gaya CSS set objek dengan mudah. Tetapi had sintaks ini ialah ia hanya boleh mendapatkan gaya sebaris dalam HTML, atau gaya ditetapkan terus menggunakan JavaScript. Objek gaya tidak boleh mendapatkan set gaya menggunakan helaian gaya luaran. Untuk mendapatkan "gaya terkira" sesuatu objek, kami menggunakan kod berikut:

Sintaks IE:

var myObject = document.getElementById("header"); 
var myStyle = myObject.currentStyle.backgroundColor;

Sintaks Firefox:

var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

3 Dapatkan atribut "kelas" elemen

Sama seperti kes atribut "float", kedua-dua penyemak imbas menggunakan kaedah JavaScript yang berbeza untuk mendapatkan atribut ini.

Sintaks IE:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

Sintaks Firefox:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4 Dapatkan atribut "untuk" tag label

Sama seperti 3, terdapat juga sintaks yang berbeza untuk menggunakan JavaScript untuk mendapatkan atribut "untuk" label.

Sintaks IE:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");

Sintaks Firefox:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

Sintaks yang sama digunakan untuk kaedah setAtrribute.

5. Dapatkan kedudukan kursor

Mendapatkan kedudukan kursor sesuatu elemen adalah jarang. Jika anda perlu melakukan ini, sintaks IE dan Firefox adalah berbeza. Kod contoh ini agak asas dan biasanya digunakan sebagai sebahagian daripada banyak pengendali acara yang kompleks, dan hanya digunakan di sini untuk menerangkan perbezaan. Ambil perhatian bahawa keputusan dalam IE adalah berbeza daripada di Firefox, jadi terdapat beberapa isu dengan pendekatan ini. Biasanya, perbezaan ini boleh dikompensasikan dengan mendapatkan "kedudukan tatal" - tetapi itu topik untuk artikel lain.

Sintaks IE:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;

Sintaks Firefox:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

6 Dapatkan saiz tetingkap atau tetingkap penyemak imbas

Kadangkala anda perlu mengetahui saiz ruang tetingkap berkesan penyemak imbas, biasanya dipanggil "tetingkap".

Sintaks IE:

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;

Sintaks Firefox:

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

7. Alpha 透明

嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：

IE 语法：

 #myElement {
filter: alpha(opacity=50);
}

Firefox 语法：

 #myElement {
opacity: 0.5;
}

要使用 JavaScript 获取这些值，需要使用 style 对象：

IE 语法： 

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";

Firefox 语法：

var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";

当然，已经说到了，一般是在循环中间来改变 opcity/alpha，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现地。

7个方面在JavaScript语法上不同的点，希望对大家的学习有所帮助。