First of all, let me declare that the version of the browser I tested is chrome15.0.874.121 Firefox 8.01 IE9 IETester
The following code is about the statement
1: Get the scroll bar
function getScroll(){
var t, l, w, h;
if ( && ) {
t = ;//The top of the scroll bar
l = ;//The left end of the scroll bar
w = ;//The width of the scroll bar, that is, the width of the page
h = ;//Height of the scroll bar
}
else
if () {
t = ;
l = ;
w = ;
h = ;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
2: Get the width and height of the view browser
function getPageWidth(){
var pageWidth = ;
if (typeof pageWindth != "number") {
if ( == "CSS1Compat") {
pageWidth = ;
}
else {
pageWidth = ;
}
}
return pageWidth;
}
function getPageHeight(){
var pageHeight = ;
if (typeof pageWindth != "number") {
if ( == "CSS1Compat") {
pageHeight = ;
}
else {
pageHeight = ;
}
}
return pageHeight;
}
3: Get the current browser model name
function(){
var Sys = {};
var ua = ();
var s;
(s = (/msie ([\d.]+)/)) ? = s[1] : (s = (/firefox\/([\d.]+)/)) ? = s[1] : (s = (/chrome\/([\d.]+)/)) ? = s[1] : (s = (/opera.([\d.]+)/)) ? = s[1] : (s = (/version\/([\d.]+).*safari/)) ? = s[1] : 0;
if ( != null) {
return ("IE:" + );//Judge IE browser and version number
}
if ( != null) {
return ("firefox:" + );//Judge firefox browser and version number
}
if ( != null) {
return ("chrome:" + );//Judge chrome browser and version number
}
if ( != null) {
return ("opera:" + );//Judge opera browser and version number
}
if ( != null) {
return ("safari:" + );//Judge safari browser and version number
}
}
4: Event monitoring
function(element, type, handler){
if () {
(type, handler, false);
}
else
if () {
("on" + type, handler);
}
else {
element["on" + type] = handler;
}
}
5: Event removal
function(element, type, handler){
if () {
(type, handler, false);
}
else
if () {
("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
6: When the event is obtained, the Firefox event will be distributed continuously, problems will occur in the first event.
function(event){
event = (event ? event : );
if (event == null) {
var $E = function(){
var c = $;
while ()
c = ;
return [0]
};
__defineGetter__("event", $E);
}
return event;
}
7: Block the default event
function(event){
if () {
();
}
else {
= false;
}
}
8: Do not continue to spread events
function(event){
if () {
();
}
else {
= true;
}
}
9: Obtain the target of event
function(event){
return || ;
}
10: Inconsistent support
E: If a document type description exists, it will be interpreted incorrectly as a comment and treat it as a Comment node, and the value of the value is always null.
Firefox: If a document type description exists, it is used as the first child node of the document, which is a DocumentType node, and the same node can also be accessed through firstChild or childNodes[0].
Safari, Chrome, Opera: If there is a document type description, it will be used as an explanation, but it is not a child node of the document and will not appear in childNodes.
11: Find elements
Sometimes, I really don’t understand what IE is always doing and always wants to be innovative. If the system does not allow the browser to be brought in, I dare say that IE will have a smaller share.
If the id and name are the same, it will be returned
<html>
<head>
<script defer>
var item=("my");
="SECOND";
</script>
</head>
<body>
<input type="text" name="my" value="FIRST" >
</body>
</html>
In IE, the results have changed.
Also IE, Id case is indistinguishable
<html>
<head>
<script defer>
var item=("MY");
="SECOND";
</script>
</head>
<body>
<input type="text" value="FIRST" >
</body>
</html>
Sorry, his results have changed again.
12: If it is a custom attribute, it cannot get the correct result in the non-IE browser.
function(item,myatt){
return [myatt].value;
}
Similarly, you should know what to do when setting properties, just assigning values.
function(item,myatt,value){
[myatt].value=value;
}
13: Number of children of elements
<ul >
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
IE results are 3, and other browsers are 7.
The blank sign between Node is a text node in other browsers, and the result is 7. If this becomes
<ul ><li>first</li><li>second</li><li>third</li></ul>
In this way, everyone's results are 3.
14: The issue of creating a node
// Dynamically add Element, all browsers can implement it
var newnode=("input");
="button";
="sixth";
//This can be implemented in IE
var newnode= ("<input type=\"button\">");
15: When blocking the right click, firefox is different from other ones, in the oncontextmenu event.
16: When adding style and script dynamically, IE is different from other browsers. Check it out specifically.
17: For DOM2 and DOM3, the situation is more complicated.