7 JavaScript differences between Firefox and IE, and Firefox javascript differences

7 JavaScript differences between Firefox and IE, and Firefox javascript differences

Note: This article, published in 2009.04.27, is an article about the existence of Javascript between IE6, IE7, FF2 +, and FF3.0.

Although it is necessary to use lengthy JavaScript code to identify the history of a specific browser, occasionally it is necessary to use a simple JavaScript code and object detection to ensure that specific JavaScript code blocks can run on users' machines. In this article, I will outline the differences in JavaScript syntax between IE and FF in seven aspects.

1. "float" attribute of CSS

The basic syntax for retrieving specific CSS attributes of a given object is object. style. property, the property with a hyphen must be replaced by the camel naming method. For example, to obtain the background-color attribute of a div whose ID is "header", the syntax is as follows:

    document.getElementById("header").style.backgroundColor= "#ccc";  

However, since JavaScript uses float as a reserved word, we cannot use the object. style. float syntax to obtain this attribute. In IE and FF, we can do this:

IE Syntax:

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

FF Syntax:

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

 2. Calculation style of Elements

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

IE Syntax:

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

FF Syntax:

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

3. Obtain the class attribute of an element.

Similar to the "float" attribute, the getAttribute method of JavaScript can be used for IE and FF, but the syntax is slightly different:

IE Syntax:

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

FF Syntax:

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

The same difference applies to the setAttribute method.

4. Obtain the for Attribute of the label.

Similar to the above, we have different JavaScript syntax to obtain the for Attribute of the label.

IE Syntax:

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

FF Syntax:

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

5. Obtain the cursor position

It is rare to obtain the cursor position of an element. If you need to do so, the syntax of IE and Firefox is different. This sample code is quite basic and is generally used as part of processing many complex events. Here it is only used to describe the differences. It should be noted that the results in IE are different from those in Firefox, so this method has some problems. In general, this difference can be compensated by obtaining a "rolling position"-but it is another article.

IE Syntax:

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

FF Syntax:

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

6. Obtain the size of the window or browser window.

Sometimes you need to find out the size of the valid window space of the browser, which is generally "window ".

IE Syntax:

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

FF Syntax:

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

7. Alpha transparent processing

This is not a JavaScript syntax problem. alpha transparency is set through css. However, when the object is set to fade in and out through JavaScript, it needs to be implemented within the loop by obtaining the alpha setting of CSS. Use the following JavaScript to change the CSS code.

IE Syntax:

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

FF Syntax:

    #myElement {          opacity: 0.5;      }  

To allow JavaScript to obtain these values, you need to use the style object.

IE Syntax:

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

FF Syntax:

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

Of course, as mentioned above, we need to modify the alpha/opacity value through an internal loop to achieve the animation effect, but this is just a simple example of how it works.

Are there other differences?

These differences are some of my personal differences in development or research. Of course there are other differences. If you think that I missed an important aspect, you can leave your comments, I will update this list of differences or post a blog.

Link: http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment-624

The difference between ie and Firefox is that javascript

Some javascript cannot be compatible with Firefox. In addition, ie6 and ie7 are not the same as ie8.

Questions about javascript in ie and firefox

There are several js browser compatibility issues in your code: 1. Firefox does not only support the document. all method. Change to: document. getElementById or document. getElementByName to get the current object. 2. There is no style. pixelTop or style. pixelLeft in Firefox, which is replaced by style. top and style. left. But pay attention to the style. left (style. top) returns a unit value. For example, if the unit is (px), the method for obtaining left is parseInt (object. style. left, 10)