Differences between IE and Firefox in JavaScript syntax _javascript tips

Although JavaScript history uses a long, annoying block of code to mark the end of a particular browser, it is still necessary to occasionally use simple blocks of code and object detection to ensure that some code is working properly on the user's machine.

In this article, I'll outline 7 aspects of Internet Explorer and Firefox that are different in JavaScript syntax.

1. CSS "Float" property

The basic syntax for obtaining a specific CSS property for a given object is the Object.style property, and the attribute of a hyphen is replaced with a camel naming method. For example, to get the Background-color property of a div with ID "header", we use the following syntax:

Copy Code code as follows:

document.getElementById ("header"). style.borderbottom= "1px solid #ccc";

But because "float" is a reserved term for JavaScript, we can't use object.style.float to get the "float" attribute. Here are some of the ways we use the two browsers:

IE Syntax:

Copy Code code as follows:

document.getElementById ("header"). Style.stylefloat = "Left";

Firefox Syntax:

Copy Code code as follows:

document.getElementById ("header"). Style.cssfloat = "Left";

2. The calculation style of the elements

By using the above Object.style.property, JavaScript can easily get and modify the object's set CSS style. But the limitation of this syntax is that it can only get inline in the HTML style, or directly using JavaScript-style settings. The style object cannot get styles that are set using an external style sheet. To get the "calculation 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 element's "class" property

Similar to the "float" attribute, the two browsers use a different JavaScript method to get this property.

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 Label label "for" property

As with 3, the "for" property that uses JavaScript to get the label also has different syntax.

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 true for Setatrribute methods.

5. Get the cursor position

Getting the cursor position of an element is relatively rare, and if you need to do so, IE and Firefox have different syntax. This sample code is fairly basic and is generally used as part of many complex event processing, and is used only to describe differences. It should be noted that the results in IE are different from Firefox, so there are some problems with this approach. Typically, this difference can be compensated by getting a "scrolling position"-but that's the topic 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 Windows or browser windows

Sometimes you need to find out the size of the browser's effective window space, which generally becomes "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, it's not really a JavaScript syntax item-alpha transparency is set by CSS. But when an object is set to fade through JavaScript, this needs to be achieved by obtaining the CSS's alpha settings, typically within the loop. To change the CSS code through 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 the 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 said, it is generally in the middle of the loop to change the Opcity/alpha to create animation effects, but this is a simple example, just to clearly describe how the method is achieved.

7 aspects in the JavaScript grammar of different points, I hope to help you learn.