First of all, let's declare here, the version of my test browser is Chrome15.0.874.121 Firefox 8.01 ie9 IETETESTER
The following code is about statement
1: Getting the rolling bar
Copy code code as follows:
function getScroll () {{)
var t, l, w, h;
If (Document.documentelement && Document.documentedLement.scrolltop) {
t = document.documentelement.scrolltop; // The top of the rolling bar
l = document.documentelement.scrollleft; // The left end of the scroll bar
w = document.documentelement.scrollwidth; // The width of the rolling bar, which is the width of the page
h = document.documentelement.scrollheight; // The height of the rolling bar
}
else
if (document.body) {
t = document.body.scrolltop;
l = document.body.scrolLLEFT;
w = document.body.scrollwidth;
h = document.body.scrollheight;
}
Return {
T: T,
L: L,
w: w,
H: H
};
}
2: Get the width height of the view browser
Copy code code as follows:
function getpageWidth () {
var pageWidth = window.innerWidth;
ifof pagewindth! = "Number") {{
if (document.compatmode == "css1compat") {{
pagewidth = document.documentelement.clientWidth;
}
else {
pagewidth = document.body.clientWidth;
}
}
Return pagewidth;
}
function getpageheight () {
var pageheight = window.innerheight;
ifof pagewindth! = "Number") {{
if (document.compatmode == "css1compat") {{
pageheight = document.documentelement.clientheight;
}
else {
pageheight = document.body.clitingheight;
}
}
Return pageheight;
}
3: Get the current browser model name
Copy code code as follows:
Function () {
var sys = {};
var ua = navigator.useragent.tolowerCase ();
var s;
(s = ua.match (/msie ([/d.+)/))? sys.ie = s [1]: (s = ua.match (/firefox // ([/d.]+)/// )? Sys.firefox = s [1]: (s = ua.match (/chrome // ([/d.]+)/))? Sys.chrome = s [1]: (s = ua.matchch (/Opera. (#/d.+)/))? sys.opera = s [1]: (s = ua.match (/veersion // ([/d,]+).*safari/))))))))))))))))))))). ? Sys.safari = s [1]: 0;
if (sys.ie! = null) {
Return ("IE:" + SYS.IE); // Determine the IE browser and version number
}
if (sys.firefox! = NULL) {
Return ("Firefox:" + Sys.firefox); // Judge the Firefox browser and version number
}
if (sys.chrome! = null) {
Return ("Chrome:" + SYS.CHROME); // Determine the chrome browser and version number
}
if (sys.opera! = null) {
Return ("Opera:" + Sys.opera); // Judge the Opera browser and version number
}
if (sys.safari! = null) {
Return ("Safari:" + SYS.SAFARI); // Determine Safari browser and version number
}
}
4: Event monitoring
Copy code code as follows:
function (Element, Type, Handler) {{
if (Element.addeventristener) {{
Element.addeventListener (Type, Handler, FALSE);
}
else
ifment.attachevent) {
Element.attachevent ("On" + Type, Handler);
}
else {
Element [on " + Type] = handler;
}
}
5: Event removal
Copy code code as follows:
function (Element, Type, Handler) {{
If (Element.removeeventListener) {
Element.removeEventListener (Type, Handler, FALSE);
}
else
ifment.detachevent) {
Element.detachevent ("On" + Type, Handler);
}
else {
Element ["on" + type] = null;
}
}
6: When Event, when the Firefox event is constantly distributed, there will be problems with the first incident.
Copy code code as follows:
Function (event) {
event = (event? event: window.event);
if (event == null) {
var $ e = function () {
var C = $ E.Caller;
While (C.Caller)
c = c.caller;
Return c.arguments [0]
};
__Definegetter __ ("event", $ e);
}
Return event;
}
7: Prevent default events
Copy code code as follows:
Function (event) {
if (event.preventdefault) {
event.preventdeFault ();
}
else {
event.returnvalue = false;
}
}
8: Do not continue to spread the incident
Copy code code as follows:
Function (event) {
if (event.stoppropagation) {
event.stoppropagation ();
}
else {
event.cancelbubble = true;
}
}
9: Get the target of Event
Copy code code as follows:
Function (event) {
Return event.target || event.srcelement;
}
10: Documen.doctype is inconsistent with support
E: If there is a document type description, it will be explained by an error as an annotation and regarding it as a Comment node.
Firefox: If there is a document type description, use it as the first sub -node of the document. Document.doctype is a DocumentType node. You can also access the same node through FIRSTCHILD or ChildNodeS [0].
Safari, Chrome, Opera: If there is a document type description, it will be explained as an explanation, but it will not appear in ChildNodes as a sub -node of the document.
11: Find elements
Sometimes I really don't understand what IE is always doing, I always want to make a difference. If the system does not let myself browser, I dare to say that IE's share will be less.
If ID and name are the same, he will also be returned
Copy code code as follows:
<html>
<head>
<script defer>
var it item = document.GetelementByid ("My");
itm.value = "second";
</script>
</head>
<body>
<input type = "text" name = "my" value = "first">
</body>
</html>
In IE, the results change.
The same is IE, ID is not distinguished
Copy code code as follows:
<html>
<head>
<script defer>
var it item = document.GetelementByid ("My");
itm.value = "second";
</script>
</head>
<body>
<input type = "text" id = "my" value = "first">
</body>
</html>
Sorry, his results changed again.
12: If it is a custom attribute, Item.myattributs cannot draw the correct results without IE browser.
Copy code code as follows:
Function (item, myatt) {
Return itm.attributes [myATT]. Value;
}
In the same case, the setting attribute should know what to do, that is, assignment.
Copy code code as follows:
Function (item, myatt, value) {
item.attributes [myATT]. Value = value;
}
13: The number of sub -nodes of the element
Copy code code as follows:
<ul ID = "Myul">
<li> first </li>
<li> Second </li>
<li> Third </li>
</ul>
The IE result is 3 and the other browser is 7.
The blank symbol between Node is a text node in other browsers, and the result is 7. If it becomes like this,
Copy code code as follows:
<ul ID = "Myul"> <li> First </li> <li> Second </li> <li> Third </li> </ul>
In this way, everyone's results are 3.
14: Create node issues
Copy code code as follows:
// Dynamically add Element, all browsers can be achieved
var newNode = document.createElement ("input");
newNode.type = "Button";
newNode.value = "SIXTH";
// It can be realized in IE
var newNode = document.createElement ("<input type =/" button/">">);
15: When shielding the right -click, Firefox is different from others, in the OnContextMenu incident.
16: When adding style and script dynamically, IE and other browsers are different. Specific check.
17: For DOM2 and DOM3, the situation is more complicated.