1.event.srcelement
Copy CodeThe code is as follows:
Srcelement can only be used in IE under the target is used by Firefox, the following is the compatibility of the wording
var obj = e.srcelement? E.srcelement:e.target;
2.e.originalevent.x
Copy CodeThe code is as follows:
E.originalevent.x can only be used under IE, Firefox can only use 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 the Firefox event can only be used if events occur
Ie:
Copy CodeThe code is as follows:
<input type= "button" value= "test 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 the parameter evt
}
</script>
Here is an example:
When you click Enter on the screen, the event is not triggered, but in a box such as TEXTAREA, click Enter to trigger the event. You can modify the code for your own use:
Copy CodeThe code is 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 CodeThe code is as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> focus on the compatibility of IE and Firefox </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 getting a specific CSS property for a given object is the Object.style property, and the properties of the hyphen are replaced by the camel name. For example, to get an background-color attribute for a div with the ID "header", we would use the following syntax:
document.getElementById ("header"). style.borderbottom= "1px solid #ccc";
But because "float" is a JavaScript reserved word, we can't use object.style.float to get the "float" attribute. Here's how we use the two browsers:
IE Syntax:
document.getElementById ("header"). Style.stylefloat = "Left";
Firefox Syntax:
document.getElementById ("header"). Style.cssfloat = "Left";
6. Calculation style for elements
By using the object.style.property above, 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 HTML style, or directly using JavaScript settings. Style objects cannot get styles that are set using an external style sheet. In order to get the "calculated style" of the object, we use the following code:
IE Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("header");
var myStyle = MyObject.currentStyle.backgroundColor;
Firefox Syntax:
Copy CodeThe 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 "float" attribute, both browsers use different JavaScript methods to get this property.
IE Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("ClassName");
Firefox Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("class");
8. Get the "for" property of the label label
As with 3, using JavaScript to get the label's "for" property also has different syntax.
IE Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("htmlfor");
Firefox Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("for");
The same syntax is true for the Setatrribute method.
9. Get the cursor position
Getting the cursor position of an element is relatively uncommon, and if you need to do so, the syntax for IE and Firefox is different. This sample code is fairly basic and is generally used as part of many complex event handling, and is used only to describe differences. It is important to note that the results in IE are different from those in Firefox, so there are some problems with this approach. Typically, this difference can be compensated by getting a "scrolling position"-but that's the subject of another article.
IE Syntax:
Copy CodeThe code is as follows:
var mycursorposition = [0, 0];
Mycursorposition[0] = Event.clientx;
MYCURSORPOSITION[1] = Event.clienty;
Firefox Syntax:
Copy CodeThe code is as follows:
var mycursorposition = [0, 0];
Mycursorposition[0] = Event.pagex;
MYCURSORPOSITION[1] = Event.pagey;
10. Get the dimensions of the Windows or browser window
Sometimes it is necessary to find out the size of the browser's effective window space, which generally becomes "Windows".
IE Syntax:
Copy CodeThe code is as follows:
var mybrowsersize = [0, 0];
Mybrowsersize[0] = document.documentElement.clientWidth;
MYBROWSERSIZE[1] = document.documentElement.clientHeight;
Firefox Syntax:
Copy CodeThe code is as follows:
var mybrowsersize = [0, 0];
Mybrowsersize[0] = window.innerwidth;
MYBROWSERSIZE[1] = window.innerheight;
11.Alpha Transparent
Well, this is not actually a JavaScript syntax project-alpha transparency is set by CSS. However, when the object is set to fade through JavaScript, this needs to be achieved by getting the alpha setting of the CSS, usually inside the loop. To change the CSS code, use the following JavaScript:
IE Syntax:
Copy CodeThe code is as follows:
#myElement {
Filter:alpha (OPACITY=50);
}
Firefox Syntax:
Copy CodeThe code is as follows:
#myElement {
opacity:0.5;
}
To get these values using JavaScript, you need to use a style object:
IE Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("myelement");
MyObject.style.filter = "Alpha (opacity=80)";
Firefox Syntax:
Copy CodeThe code is as follows:
var myObject = document.getElementById ("myelement");
myObject.style.opacity = "0.5″;
Of course, as already mentioned, 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 implemented.
