Differences in JavaScript syntax between IE and Firefox _ javascript tips-js tutorial

This article mainly introduces the differences in JavaScript syntax between IE and Firefox, and seven different aspects in JavaScript syntax, if you are interested, you can refer to the conclusion that, although JavaScript history uses lengthy and annoying code blocks to mark specific browsers, the period has ended, however, it is necessary to occasionally use some simple code blocks and object detection to ensure that some code works normally on the user's machine.

In this article, I will outline seven different aspects of Internet Explorer and Firefox in JavaScript syntax.

1. CSS "float" attributes

The basic syntax for getting a specific CSS attribute of a given object is the object. style attribute, and the attributes with hyphens must be replaced by the camel naming method. For example, to obtain the background-color attribute of p whose ID is "header", we need to use the following syntax:

The Code is as follows:

Document. getElementById ("header"). style. borderBottom = "1px solid # ccc ";

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

IE Syntax:

The Code is as follows:

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

Firefox Syntax:

The Code is as follows:

Document. getElementById ("header" ).style.css Float = "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;

Firefox 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 two browsers use different JavaScript methods to obtain 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. Obtain the "for" attribute of the label.

Like 3, using JavaScript to obtain the "for" attribute of a label also has different syntaxes.

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 used for the setAtrribute method.

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;

Firefox 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;

Firefox Syntax:

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

7. Alpha transparency

Well, this is not actually a JavaScript syntax project-alpha transparency is set through CSS. However, when the object is set to fade in and out through JavaScript, it needs to be implemented by obtaining the alpha setting of CSS, which is generally within the loop. Use the following JavaScript to change the CSS code:

IE Syntax:

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

Firefox Syntax:

 #myElement {opacity: 0.5;}

To obtain 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, we have already mentioned that it is generally used to change opcity/alpha in the middle of a loop to create an animation effect. But this is a simple example, to clearly describe how the method is implemented.

The seven aspects have different points in JavaScript syntax and hope to help you learn them.