7 JavaScript differences between Firefox and IE_html/css_WEB-ITnose

While JavaScript’s historical days of using lengthy and obnoxious blocks of code to target specific browsers are over, some simple code blocks and object detection are occasionally used to ensure that some code is It is still necessary for the machine to work properly.

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

1. CSS “float” property

The basic syntax for getting specific CSS properties of a given object is the object.style property, and properties with hyphens should be used camel nomenclature instead. For example, to get the background-color attribute of a div with the ID "header", we need to use the following syntax:

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

But since "float" is a reserved word in JavaScript, we You cannot use object.style.float to get the "float" property. The following is the method we use in the two browsers:

IE syntax:

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

Firefox syntax:

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

2. Calculated styles of elements

By using the above object.style.property, JavaScript can easily obtain and modify the set CSS style of the object. But the limitation of this syntax is that it can only get styles inline in HTML, or styles set directly using JavaScript. The style object cannot obtain styles set using external style sheets. To get the "calculated style" of an 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 "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. Get the label tag The "for" attribute

is the same as 3. There are also different syntaxes for using JavaScript to obtain the label's "for" attribute.

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 is true for the setAtrribute method grammar.

5. Get the cursor position

Getting the cursor position of an element is rare. If you need to do this, the syntax of IE and Firefox is also different. This example code is fairly basic and is typically used as part of many complex event handlers, and is only used here to describe the differences. Note that the results in IE are different than in Firefox, so there are some issues with this approach. Usually, this difference can be compensated by obtaining the "scroll position" - but that's a topic for 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 window or Browser window size

Sometimes it is necessary to find out the size of the browser's effective window space, usually called the "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 item - alpha transparency is Set via CSS. But when an object is set to fade via JavaScript, this needs to be accomplished by getting the CSS alpha setting, typically inside a 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, as mentioned, the opcity/alpha is usually changed in the middle of the loop to create animation effects, but this is a simple example just to clearly describe how the method is implemented.