Differences between the seven JavaScript browsers in IE and Firefox

Document directory

• 1. CSS "float" Value
• 2. Calculation style of Elements
• 3. Access the "class" of the element"
• 4. Access "for" in the <label> label"
• 5. Get the cursor position
• 6. Obtain the visible area and window size.
• 7. Alpha transparency

I found a good article today. I will repost it for your convenience.
Http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/
Even though it's time to use long string, dull, and different branch code to handle different browsers, occasionally, it is necessary to make some simple differentiation and target detection to ensure that a piece of code can run properly on the user's machine. In this article, the author introduces seven JavascriptIEAndFirefox.
In addition, the broken bridge residual snow has just sorted out some differences between Javascript in IE and Firefox: Summary of differences between Javascript in IE and Firefox

1. CSS "float" Value

The most basic syntax for accessing a given CSS value is: object. style. property, which is used to replace the value with a connector, for example, accessing the <div>Background-colorThe following syntax is used:

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

However, because"Float"This word isReserved JavaScript wordsTherefore, we cannot use object. style. Float for access. Here, we can do this in two browsers:
Write in IE as follows:

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

Write in Firefox as follows:

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

2. Calculation style of Elements

Javascript can use the object. style. Property syntax to conveniently access and modifyCSS styleBut the limit is that these syntaxes can only retrieve the set intra-row style or the style directly set by JavaScript. You cannot access an external style sheet. To access the "Estimate" style of elements, we can use the following code:
Write in IE as follows:

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

Write in Firefox as follows:

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

3. Access the "class" of the element"

Image"Float"Same ,"Class"It is a reserved word of JavaScript. In these two browsers, we use the following syntax to access" class ".
Write in IE as follows:

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

Write in Firefox as follows:

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

This syntax wowould also apply using the setattribute method.

4. Access "for" in the <label> label"

As mentioned in point 3rd, we also need to use non-existent syntaxes to access<Label>"For":
Write in IE as follows:

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

Write in Firefox as follows:

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

5. Get the cursor position

It may be rare for you to calculate the cursor position, but the syntax in IE and Firefox is different when you need it. The code written here is the most basic and may be a part of the processing of a complex event. But they can explain the similarities and differences. At the same time, it must be noted that the result is relativeFirefox, Ie will be more different, this method itself is a bug. In general, you can use the "drag position" to compensate for this difference, but it is another topic article :)!
Write in IE as follows:

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

Write in Firefox as follows:

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

6. Obtain the visible area and window size.

Sometimes, we need to find the size of the visible position of the browser, which is usually called "visible area ".
Write in IE as follows:

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

Write in Firefox as follows:

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

7. Alpha transparency

Okay, this is notJavascriptThe syntax problem is caused by CSS'sAlpha transparency. However, JavaScript is required when an object needs to fade in/out. This is done by accessing the Alpha transparent settings of CSS, usually in a loop. The javascript code you need to modify is as follows:
Write in IE as follows:

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

Write in Firefox as follows:

#myElement { opacity: 0.5; }

Write in IE as follows:

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