Summary of 7 different writing methods in JavaScript between IE and Firefox_javascript skills

In this article, the author introduces 7 different JavaScript syntaxes 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 values ​​with connectors, 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 access it in two browsers Do this in:
Write this in IE:
document.getElementById("header").style.styleFloat = "left";
Write this in Firefox:
document.getElementById(" header").style.cssFloat = "left";
2. The inferred style of the element
JavaScript can use the
object.style.property
syntax, conveniently external Access and modify a CSS style, but the limitation is that these syntaxes 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 element's "class"
Like "float", "class" is a reserved word in JavaScript. 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 "for" in the tag
As mentioned in point 3, we also need to use invisible syntactic distinction to access < ;label> "for" in the label:
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 position of the mouse pointer
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 with "drag position", but that's an article for another topic :) !

Write this in IE:

Copy code The code is as follows:

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

Write this in Firefox:

Copy code The code is as follows:

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

6. Get the size of the visible area and window
Sometimes, we need to find the size of the visible position of the browser, usually we call it the "visible area".
Write like 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";
Is there anything else different?

This It 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!