1.event.srcelement
Copy Code code as follows:
Srcelement can only be used under IE target is Firefox use, the following is the compatibility of the wording
var obj = e.srcelement? E.srcelement:e.target;
2.e.originalevent.x
Copy Code code as follows:
E.originalevent.x can only be used under IE, Firefox can only use the E.originalevent.layerx, the following is the compatibility of the wording
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 under Firefox,
This is because Firefox events can only be used if there is an event happening.
Ie:
Copy Code code as follows:
<input type= "button" value= "test the event under IE" onclick= "test1 ()"/>
<input type= "button" value= "test event Compatibility" onclick= "test2 ()"/>
<script language= "JavaScript" >
function Test1 () {
alert (window.event); Using window.event
}
function Test2 (evt) {
EVT=EVT?EVT: (Window.event?window.event:null);
alert (EVT); Using Parameters evt
}
</script>
Here is an example:
When you click Return on the screen, the event does not occur, but in a box such as TEXTAREA, click Enter to trigger the event. You can modify the code for your own use:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>s</title>
<script language= "JavaScript" >
Document.onkeydown=keypage
function Keypage (e) {
Eevt=e?e: (Window.event?window.event:null);
if (evt.keycode==13) {
if (window. XMLHttpRequest) {//IE7 FF MO
Alert ((evt evt.explicitOriginalTarget:null). TagName)
if (evt evt.explicitOriginalTarget:null). TagName = = "TEXTAREA") {
var obj = evt? Evt.explicitOriginalTarget:null;
Alert ("id:=" +obj.id)
}
else {//IE6
if (document.activeelement.type== "textarea") {
var obj = document.activeelement
Alert ("id:=" +obj.id)
}
}
}
} </script>
<body>
<input id= "Test1" type= "text" >
<br>
<input id= "Test2" type= "text" >
<br>
<input id= "test3" type= "button" >
<br>
<textarea id= "Test4" ></textarea>
</body>
4.innerText
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> focus on IE and Firefox compatibility </title>
<script language= "JavaScript" >
function Testinnertext () {
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}
} </script>
<body>
<input name= "button" type= "button" value= "Testinnertext" onclick= "Javascript:testinnertext ()"/>
<div id= "element" style= "border:1px solid #0066CC; width:100px; height:50px "></div>
</body>
5.CSS "Float" property
The basic syntax for obtaining a specific CSS property for a given object is the Object.style property, and the attribute of a hyphen is replaced with a camel naming method. For example, to get the Background-color property of a div with ID "header", we use the following syntax:
document.getElementById ("header"). style.borderbottom= "1px solid #ccc";
But because "float" is a reserved term for JavaScript, we can't use object.style.float to get the "float" attribute. Here are some of the ways we use the two browsers:
IE Syntax:
document.getElementById ("header"). Style.stylefloat = "Left";
Firefox Syntax:
document.getElementById ("header"). Style.cssfloat = "Left";
6. The calculation style of the elements
By using the above Object.style.property, JavaScript can easily get and modify the object's set CSS style. But the limitation of this syntax is that it can only get inline in the HTML style, or directly using JavaScript-style settings. The style object cannot get styles that are set using an external style sheet. To get the "calculation style" of the 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 code as follows:
var myObject = document.getElementById ("header");
var Mycomputedstyle = Document.defaultView.getComputedStyle (myObject, NULL);
var myStyle = Mycomputedstyle.backgroundcolor;
7. Get the element's "class" property
Similar to the "float" attribute, the two browsers use a different JavaScript method to get this property.
IE Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("ClassName");
Firefox Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("class");
8. Get Label label "for" property
As with 3, the "for" property that uses JavaScript to get the label also has different syntax.
IE Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("htmlfor");
Firefox Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("for");
The same syntax is true for Setatrribute methods.
9. Get the cursor position
Getting the cursor position of an element is relatively rare, and if you need to do so, IE and Firefox have different syntax. This sample code is fairly basic and is generally used as part of many complex event processing, and is used only to describe differences. It should be noted that the results in IE are different from Firefox, so there are some problems with this approach. Typically, this difference can be compensated by getting a "scrolling position"-but that's the topic of another article.
IE Syntax:
Copy Code code as follows:
var mycursorposition = [0, 0];
Mycursorposition[0] = Event.clientx;
MYCURSORPOSITION[1] = Event.clienty;
Firefox Syntax:
Copy Code code as follows:
var mycursorposition = [0, 0];
Mycursorposition[0] = Event.pagex;
MYCURSORPOSITION[1] = Event.pagey;
10. Get the size of Windows or browser windows
Sometimes you need to find out the size of the browser's effective window space, which generally becomes "window".
IE Syntax:
Copy Code code as follows:
var mybrowsersize = [0, 0];
Mybrowsersize[0] = document.documentElement.clientWidth;
MYBROWSERSIZE[1] = document.documentElement.clientHeight;
Firefox Syntax:
Copy Code code as follows:
var mybrowsersize = [0, 0];
Mybrowsersize[0] = window.innerwidth;
MYBROWSERSIZE[1] = window.innerheight;
11.Alpha Transparent
Well, it's not really a JavaScript syntax item-alpha transparency is set by CSS. But when an object is set to fade through JavaScript, this needs to be achieved by obtaining the CSS's alpha settings, typically within the loop. To change the CSS code through the following JavaScript:
IE Syntax:
Copy Code code as follows:
#myElement {
Filter:alpha (OPACITY=50);
}
Firefox Syntax:
Copy Code code as follows:
#myElement {
opacity:0.5;
}
To get these values using JavaScript, you need to use the style object:
IE Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("myelement");
MyObject.style.filter = "Alpha (opacity=80)";
Firefox Syntax:
Copy Code code as follows:
var myObject = document.getElementById ("myelement");
myObject.style.opacity = "0.5″;
Of course, it has been said, it is generally in the middle of the loop to change the Opcity/alpha to create animation effects, but this is a simple example, just to clearly describe how the method is achieved.
Author: herobeast
