Differences in JavaScript syntax between IE and Firefox

Although the period in JavaScript's history of using lengthy and annoying code blocks to target specific browsers is over, it is still necessary to occasionally use simple code blocks and object detection to ensure some code works properly on user machines.

In this article, I will briefly describe the 7 different aspects of JavaScript syntax between Internet Explorer and Firefox.

1. CSS “float” attribute

The basic syntax for obtaining a specific CSS attribute of a given object is the object.style attribute, and attributes with hyphen should be replaced by camel nomenclature. For example, to obtain the background-color property of a div with ID "header", we need to use the following syntax:

The code copy is as follows: document.getElementById("header").style.borderBottom= "1px solid #ccc";

However, since "float" is a reserved word for JavaScript, we cannot use object.style.float to obtain the "float" attribute. Here is how we use it in two browsers:

IE syntax:

The code copy is as follows: document.getElementById("header").style.styleFloat = "left";

Firefox syntax:

The code copy is as follows: document.getElementById("header").style.cssFloat = "left";

2. Element calculation style

By using the above object.style.property, JavaScript can easily obtain and modify the CSS style of the object. However, the limitation of this syntax is that it can only obtain inline styles in HTML, or directly use JavaScript to set styles. The style object cannot get styles set using an external stylesheet. To get the "calculated style" of the object, we use the following code:

IE syntax:

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

Firefox syntax:

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

3. Get the "class" attribute of the element

Similar to the case of the "float" attribute, the two browsers use different JavaScript methods to get this attribute.

IE syntax:

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

Firefox syntax:

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

4. Get the "for" attribute of the label tag

Like 3, there are different syntaxes to use JavaScript to get the "for" attribute of a label.

IE syntax:

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

Firefox syntax:

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

The same syntax is also true for the setAttribute method.

5. Get the cursor position

It is rare to get the cursor position of an element. If you need to do this, the syntax of IE and Firefox is also different. This sample code is quite basic and is generally used as part of many complex event processing, and is only used to describe the differences here. It should be noted that the results in IE are different from those in Firefox, so this method has some problems. Usually, this difference can be compensated by getting the "scroll position" - but that's the subject of another article.

IE syntax:

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

Firefox syntax:

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

6. Get the size of the window or browser window

Sometimes it is necessary to find out the size of the effective window space of the browser, which is usually a "window".

IE syntax:

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

Firefox syntax:

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

7. Alpha transparent

Well, this is not actually a syntax project for JavaScript - alpha transparency is set through CSS. However, when the object is set to fade in and out through JavaScript, this needs to be achieved by obtaining the alpha settings of the CSS, which is generally inside the loop. To change the CSS code with the following JavaScript:

IE syntax:

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

Firefox syntax:

 #myElement {opacity: 0.5;}

To get these values ​​using JavaScript, you need to use a style object:

IE syntax:

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

Firefox syntax:

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

Of course, it has been mentioned that it is generally to change opcity/alpha in the middle of a loop to create animation effects, but this is a simple example, just to clearly describe how the method is implemented.

There are 7 different points in JavaScript syntax in terms of JavaScript, I hope it will be helpful to everyone's learning.