Summary of 7 Differences and Compatibility Writing Methods of JavaScript under IE and Firefox Browsers_Javascript Tips

In this article, the author introduces 7 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, using camelCase notation to replace the value with a connector, for example, To access the background-color value of a

with the ID "header", we use the following syntax:

document.getElementById("header").style.backgroundColor= "#ccc";
But since the word "float" is a JavaScript reserved word, we cannot use object.style.float to access it. Here, we can do this in two browsers:
Write this in IE:

document.getElementById("header").style.styleFloat = "left";
Write this in Firefox:

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

2. Inferred styles of elements
JavaScript can use the object.style.property syntax to easily access and modify a CSS style externally, but its limitations are these The syntax can only retrieve already set inline styles or styles set directly by JavaScript. It cannot access an external style sheet. To access the "inferred" style of an element, we can use the following code:
Write this in IE:

var myObject = document.getElementById("header");
var myStyle = myObject .currentStyle.backgroundColor;
Write this in Firefox:

var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. Access the "class" of the element
Like "float", "class" is a reserved word in JavaScript, and in these two browsers In the container we use the following syntax to access "class".
Write like this in IE:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Write like this in Firefox :

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
This syntax would also apply using the setAttribute method.

4. Access the "for" in the tag
As mentioned in point 3, we also need to use invisible syntax distinction to access the tag "for":
Write this in IE:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Write this in Firefox:

var = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
5. Get the mouse pointer Position
Calculating the position of the mouse pointer may be very uncommon for you, but when you need it, the syntax is different in IE and Firefox. The code written here will be the most basic, or it may be a certain part of a complex event processing. But they can explain the similarities and differences. At the same time, it must be pointed out that the results of IE will be more different than Firefox, and this method itself has bugs. Usually, this difference can be compensated for with "drag position", but that's an article for another topic :) !
Write like this in IE:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
Write this in Firefox:

var myCursorPosition = [0, 0] ;
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;
6. Get the size of the visible area and window
Sometimes, we will You need to find the size of the browser's visible location, which is usually called the "visible area".
Write this in IE:

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement. clientHeight;
Write this in Firefox:

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
7. Alpha transparency
Well, this is not a JavaScript syntax problem, but Alpha transparency derived from CSS. But when an object needs to fade in/out, JavaScript is required to perform it. This is done by accessing the Alpha transparency setting of CSS, usually in a loop. The JavaScript code you need to modify is as follows:
Write this in IE:

#myElement { filter: alpha(opacity=50); }
Write this in Firefox:

#myElement { opacity: 0.5; }
Write this in IE:

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha (opacity=80)";
Write this in Firefox:

var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
What else? Different?
This is compiled by the author (via: 7 JavaScript Differences Between Firefox & IE) based on his own experience, and sofish is still a newbie in JavaScript. If there are more differences, you are welcome to bring them up, share them, and learn together!