Firefox vs. ie 7 JavaScript differences

Author Note: This article, published in 2009.04.27, is an article on the discussion of the existence of JavaScript between IE6, IE7, and ff2+ and FF3.0.

Although the history of having to use lengthy JavaScript code to identify a particular browser is over, however. It is occasionally necessary to use a simple JavaScript code and object Check to ensure that a particular JavaScript block of code can be executed on the user's machine. In this article, I will outline the differences in JavaScript syntax between IE and FF from 7 aspects.

1. css "Float" property

The basic syntax for getting a specific CSS property for a given object is Object.style.property. Properties with hyphens are replaced by camel nomenclature, for example, to get an background-color attribute for a div with the ID "header". The syntax is as follows:

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

But since JavaScript has a float as a reserved word, we can't useobject.style.float syntax to get the property. 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 object.style.property above, JavaScript can easily get and alter the object's set CSS style. But the limitation of this syntax is that it can only get inline in HTML style, or directly using JavaScript settings.

Style objects cannot get styles that are set using an external style sheet.

In order 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;  

FF 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 "float" property. Both IE and FF can use JavaScript's GetAttribute method, 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 as well.

4. Gets the for property of the label label

Similar to the above, we have different JavaScript syntax to get the label label's for property.

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. Get cursor Position

Getting the cursor position of the element is relatively rare, assuming that the need to do so, IE and Firefox syntax is also different.

This demo sample code is fairly basic and is generally used as part of many complex event processing. This is used only to describe the narrative differences. It is important to note that the results in IE are different from those in Firefox. So there are some problems with this approach.

Typically, this difference can be compensated by acquiring a "scrolling position"-but that is the subject of 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. Get the size of the window or browser form

Sometimes it is necessary to find out the size of the browser's effective form space, which generally becomes "Windows".

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 through JavaScript, this needs to be done inside the loop by getting the alpha setting of the CSS. Use the following JavaScript to change the CSS code.

IE Syntax:

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

FF Syntax:

#myElement {  
        opacity: 0.5;  
    }  

In order for JavaScript to get these values, you need to use a 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, you need to change the alpha/opacity value through the internal loop to achieve the animation effect. But this is just a simple example of how to use it to work.

Are there any other differences?

These differences are something I have personally encountered in development or research, and of course there are other differences, assuming that you think I missed out on one important aspect. Be able to leave your comments. I'm going to update this list of differences. or post a blog.

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

Firefox vs. ie 7 JavaScript differences