Summary of the differences between JS common functions between IE and FireFox_javascript skills

1.event.srcElement

Copy code The code is as follows:

//srcElement can only be used in IE The target used below is used by FireFox. The following is the compatibility writing method
var obj = e.srcElement ? e.srcElement : e.target;

2.e.originalEvent.x

Copy code The code is as follows:

// e.originalEvent.x can only be used under IE, FireFox Only e.originalEvent.layerX can be used. The following is the compatibility writing method
var positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset ().left || 0;

3.windows.event
window.event can only run under IE, not Firefox,
This is because of Firefox event can only be used when an event occurs
IE:

Copy code The code is as follows:

The following is an example:
When you click Enter on the screen, the event is not triggered, but it is triggered when you click Enter in a box like TextArea event. You can modify the code for your own use:

Copy the code The code is as follows:

4.innerText

Copy code Code As follows:

5.CSS "float" property


The basic syntax for getting specific CSS properties of a given object is the object.style property, and hyphenated properties should be replaced by camel nomenclature. 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 cannot use object.style.float to get the "float" attribute. 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";
6. Calculated style of element


By using the above object.style.property, JavaScript can easily obtain and modify the object's set CSS style. 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:

Copy code Code As follows:

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

Firefox syntax:

Copy code The code is as follows:

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

7. Get the "class" attribute of the element


Similar to the case of the "float" attribute, the two browsers use different JavaScript methods to obtain this attribute.

IE syntax:

Copy code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

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

8. Get the "for" attribute of the label


Same as 3, there are different syntaxes for using JavaScript to get the "for" attribute of the label.

IE syntax:

Copy code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

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

The same syntax is used for the setAtrribute method.

9. 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 getting the "scroll position" - but that's a topic for another article.

IE syntax:

Copy code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

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

10. Get the size of the window or browser window


Sometimes it is necessary to find out the size of the browser's effective window space, usually called the "window".

IE syntax:

Copy code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

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

11.Alpha transparent


Well, this is actually not 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:

Copy the code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

#myElement {
opacity: 0.5;
}

To use To get these values ​​in JavaScript, you need to use the style object:

IE syntax:

Copy code The code is as follows:

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

Firefox syntax:

Copy code The code is as follows:

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.
Author: HeroBeast