自己总结的浏览器兼容性方法

<!--  -->
<html>
<head>
<script type="text/javascript">


/************************************************  兼容  ************************************************************/         
 if(window.HTMLElement) {
  
  //swapNode无法应用于FF-交换节点
  Node.prototype.swapNode=function($target){
   var $targetParent=$target.parentNode;
   var $targetNextSibling=$target.nextSibling;
   var $thisNode=this.parentNode.replaceChild($target,this);
   $targetNextSibling?$targetParent.insertBefore($thisNode,$targetNextSibling):$targetParent.appendChild($thisNode);
   return this;
  }
  //replaceNode无法应用于FF-替换指定节点
  Node.prototype.replaceNode=function(Node){
   this.parentNode.replaceChild(Node,this);
  }
  // removeNode无法应用于FF-删除指定节点
  Node.prototype.removeNode=function(removeChildren){
   if(removeChildren)
    return this.parentNode.removeChild(this);
   else{
    var range=document.createRange();
    range.selectNodeContents(this);
    return this.parentNode.replaceChild(range.extractContents(),this);
   }
  }

  //dom的all无法应用于FF
  HTMLElement.prototype.__defineGetter__("all",function(){
     var a=this.getElementsByTagName("*");
     var node=this;
     a.tags=function(sTagName){
      return node.getElementsByTagName(sTagName);
      }
     return a;
  });
  //dom的parentElement无法应用于FF
  HTMLElement.prototype.__defineGetter__("parentElement",function(){
     if(this.parentNode==this.ownerDocument)return null;
     return this.parentNode;
  });
  //children无法应用于FF
  HTMLElement.prototype.__defineGetter__("children",function(){
   var tmp=[];
   var j=0;
   var n;
   for(var i=0;i<this.childNodes.length;i++){
     n=this.childNodes[i];
     if(n.nodeType==1){
     tmp[j++]=n;
     if(n.name){
      if(!tmp[n.name])
       tmp[n.name]=[];
       tmp[n.name][tmp[n.name].length]=n;
     }
     if(n.id)
      tmp[n.id]=n;
     }
   }
   return tmp;
        });
  //Dom的innerText属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__( "innerText",
   function(){
    return this.textContent;
   }
  );
  //Dom的innerText属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__( "innerText",
   function(sText){
    this.textContent=sText;
   }
  );
  //Dom的outerHTML属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
   var r=this.ownerDocument.createRange();
   r.setStartBefore(this);
   var df=r.createContextualFragment(sHTML);
   this.parentNode.replaceChild(df,this);
   return sHTML;
  });
  //Dom的outerHTML属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__("outerHTML",function() {
   var attr;
   var attrs=this.attributes;
   var str="<"+this.tagName.toLowerCase();
   for (var i=0;i<attrs.length;i++) {
    attr=attrs[i];
    if(attr.specified)
     str+=" "+attr.name+'="'+attr.value+'"';
   }
   if(!this.canHaveChildren)
    return str+">";
   return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
   });
  //Dom的outerText属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__("outerText",function(sText){
   var parsedText=document.createTextNode(sText);
   this.outerHTML=parsedText;
   return parsedText;
        });
  //Dom的outerText属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__("outerText",function(){
   var r=this.ownerDocument.createRange();
   r.selectNodeContents(this);
   return r.toString();
        });
  //dom的runtimeStyle无法应用于FF
  HTMLElement.prototype.__defineGetter__("runtimeStyle",
   function(){
    return this.style;
   }
  );
  //dom的currentStyle无法应用于FF
  HTMLElement.prototype.__defineGetter__("currentStyle", function(){
   return this.ownerDocument.defaultView.getComputedStyle(this,null);
  });
  //dom的canHaveChildren无法应用于FF
  HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
    switch(this.tagName.toLowerCase()) {
     case "area":
     case "base":
     case "basefont":
     case "col":
     case "frame":
     case "hr":
     case "img":
     case "br":
     case "input":
     case "isindex":
     case "link":
     case "meta":
     case "param":
     return false;
    }
    return true;
  });
  //attachEvent无法应用于FF;sType(事件类型),fHandler(绑定对象)
  HTMLElement.prototype.attachEvent=function(sType,fHandler){
   var shortTypeName=sType.replace(/on/,"");
   fHandler._ieEmuEventHandler=function(e){
    window.event=e;
    return fHandler();
   }
   this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
  }
  //detachEvent无法应用于FF;
  HTMLElement.prototype.detachEvent=function(sType,fHandler){
     var shortTypeName=sType.replace(/on/,"");
     if(typeof(fHandler._ieEmuEventHandler)=="function")
      this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     else
      this.removeEventListener(shortTypeName,fHandler,true);
  }
  //contains无法应用于FF-包含
  HTMLElement.prototype.contains = function(Node){
   do if(Node==this){
    return true;
   }while(Node=Node.parentNode);
   return false;
  }
  //insertAdjacentElement无法应用于FF
  /* swhere: 指定插入html标签语句的地方,有四种值可用:
     1.beforeBegin: 插入到标签开始前
     2.afterBegin:插入到标签开始标记之后
     3.beforeEnd:插入到标签结束标记前
     4.afterEnd:插入到标签结束标记后
   stext:要插入的内容
  */
  HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){
     switch(where){
      case "beforeBegin":
       this.parentNode.insertBefore(parsedNode,this);
       break;
      case "afterBegin":
       this.insertBefore(parsedNode,this.firstChild);
       break;
      case "beforeEnd":
       this.appendChild(parsedNode);
       break;
      case "afterEnd":
       if(this.nextSibling)
        this.parentNode.insertBefore(parsedNode,this.nextSibling);
       else
        this.parentNode.appendChild(parsedNode);
       break;
      }
  }
  //insertAdjacentHTML无法应用于FF
  HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){
     var r=this.ownerDocument.createRange();
     r.setStartBefore(this);
     var parsedHTML=r.createContextualFragment(htmlStr);
     this.insertAdjacentElement(where,parsedHTML);
  }
  //insertAdjacentText无法应用于FF
  HTMLElement.prototype.insertAdjacentText=function(where,txtStr){
     var parsedText=document.createTextNode(txtStr);
     this.insertAdjacentElement(where,parsedText);
  }

  //event.x和event.y无法应用于FF-相对文档的水平座标
  Event.prototype.__defineGetter__( "x",function(){
    return this.pageX;
   });
  Event.prototype.__defineGetter__( "y",function(){
    return this.pageY;
   });
  //offsetX和offsetY无法应用于FF-相对容器的水平坐标
  if(window.navigator.userAgent.indexOf("Firefox")>0){
   Event.prototype.__defineGetter__("offsetX",function(){
     return this.layerX;
    });
   Event.prototype.__defineGetter__("offsetY",function(){
     return this.layerY;
    });
  }
  //srcElement无法应用于FF-设置或获取触发事件的对象
  /* 引用对象,这个对象有什么属性,就可以使用。
   常用的有:
   event.srcElement.TagName 事件对象的html标记
   event.srcElement.innerText 事件对象的内文本
   event.srcElement.value 表单事件对象的值
  */
    Event.prototype.__defineGetter__( "srcElement",function(){
    return this.target;
   });
  //fromElement无法应用于FF-返回鼠标移出的源节点
  Event.prototype.__defineGetter__("fromElement",function(){
    var node;
    if(this.type=="mouseover")
     node=this.relatedTarget;
    else if(this.type=="mouseout")
     node=this.target;
    if(!node)return;
    while(node.nodeType!=1)node=node.parentNode;
    return node;
   });
  //toElement无法应用于FF-返回鼠标移入的源节点
  Event.prototype.__defineGetter__("toElement",function(){
    var node;
    if(this.type=="mouseout")
     node=this.relatedTarget;
    else if(this.type=="mouseover")
     node=this.target;
    if(!node)return;
    while(node.nodeType!=1)node=node.parentNode;
    return node;
   });
  //window.event无法应用于FF
  //window.constructor.prototype.__defineGetter__("event",__window_event_constructor);


 }

 if(/Firefox/.test(navigator.userAgent)){
  window.constructor.prototype.__defineGetter__("event",__window_event_constructor);
 }

 function __window_event_constructor(){
    if(document.all){
     return window.event;
    }
    var _caller = __window_event_constructor.caller;
    while(_caller!=null){
     var _argument = _caller.arguments[0];
     if(_argument){
      var _temp = _argument.constructor;
      if(_temp.toString().indexOf("Event")!=-1){
       return _argument;
      }
     }
     _caller = _caller.caller;
    }
    return null;
 }
 
 //iframe-通过传入一个iframe参数,设置为可编缉iframe
 function editable(obj,isflag){
  var editor = obj;
  editor = editor.contentWindow;
  //editor.document.body.contentEditable = true;
  editor.document.designMode=isflag;
 }

 //iframe-自适应高度
 function autoheight(obj){
  parent.document.all(obj.id).style.height=document.body.scrollHeight; //自动适应高度
  //parent.document.all(obj.id).style.width=document.body.scrollWidth; //自动适应宽度
 }
 

/************************************************** 扩展 **********************************************************/

 //ie(扩展),其它(支持)- trim 去除首尾空格
 if(!String.prototype.trim){
  String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g,"");
   }
 }
 //ie(扩展),其它(支持)- trim 去除首空格
 if(!String.prototype.lTrim){
  String.prototype.lTrim=function(){
    return this.replace(/(^\s*)/g,"");
   }
 }
 //ie(扩展),其它(支持)- trim 去除尾空格
 if(!String.prototype.rTrim){
  String.prototype.rTrim = function(){  
    return this.replace(/(\s*$)/g,""); 
   }
 }
 //(扩展),把字符串的首字母转化为大写
 if(!String.prototype.initialsToUpper){
  String.prototype.initialsToUpper = function() { 
    return this.substring(0,1).toUpperCase().concat(this.substring(1)); 
   }
 }
 
 //(扩展),验证是否为合法的手机号码
 if(!String.prototype.isMobile){
  String.prototype.isMobile = function() {
   return /^1[358]\d{9}$/.test(this.trim());  
  }
 }
 //(扩展),验证是否为合法的Email
 if(!String.prototype.isEmail){
  String.prototype.isEmail = function() {
   return (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim());
  }
 }
 //(扩展),验证是否为合法的电话号码或传真
 if(!String.prototype.isPhone){
  String.prototype.isPhone = function() {
   return /^(0\d{2,3}-\d{7,8}(?:-\d{1,4})?|1\d{10})|(0\d{2,3}\d{7,8})$/.test(this.trim());  
  }
 }
 //(扩展),验证是否为合法的邮编
 if(!String.prototype.isPost){
  String.prototype.isPost = function() { 
   return /^\d{6}$/.test(this.trim()); 
  }
 }
 //(扩展),验证是否为合法的身份证号
 if(!String.prototype.isIdCard){
  String.prototype.isIdCard = function() {
   return /(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.trim());
  }
 }
 //(扩展), 非空验证
 if(!String.prototype.isEmpty){
  String.prototype.isEmpty = function() {
   return this.trim()==="";
  }
 }
 //(扩展),银行账号验证
 if(!String.prototype.isBank){
  String.prototype.isBank = function() {
   return /^\d{16,19}$/.test(this.trim());
  }
 }
 //(扩展),验证是否为合法的网址
 if(!String.prototype.isUrl){
  String.prototype.isUrl = function() { 
   // /^http:\/\/\S*$/
   ///(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
   var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
    + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
    + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
    + "|" // 允许IP和DOMAIN(域名)
    + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
    + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
    + "[a-z]{2,6})" // first level domain- .com or .museum
    + "(:[0-9]{1,4})?" // 端口- :80
    + "((/?)|" // a slash isn't required if there is no file name
    + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
   var re = new RegExp(strRegex);   
   return re.test(this.trim());
  }
 }

 //ie(扩展),其它(支持)- indexOf 检索字符串
 if(!Array.prototype.indexOf){
  Array.prototype.indexOf = function(obj) {  
    var result = -1;  
    for(var i = 0; i < this.length; i++) {  
     if(this[i] == obj) {  
      result = i;  
      break;  
     }  
    }  
    return result;  
   }
 }
 //(扩展)- contains 检查一个对象是否包含在Array中
 if(!Array.prototype.contains){
  Array.prototype.contains = function(obj) {  
    return this.indexOf(obj) > -1;
   }
 }
 //(扩展)- add 添加一个对象
 if(!Array.prototype.add){
  Array.prototype.add = function(obj) {  
    if(!(this.contains(obj))) {  
     this[this.length] = obj;  
    }  
   }
 }
 //(扩展)- remove 删除一个对象
 if(!Array.prototype.remove){
  Array.prototype.remove = function(obj) {  
    if(this.contains(obj)) {  
     var index = this.indexOf(obj);  
     for(var i = index; i < this.length - 1; i++) {  
      this[i] = this[i + 1];  
     }  
     this.length--;  
    }  
   } 
 }
 //(扩展),去掉数组中重复的值
 if(!Array.prototype.unique){
  Array.prototype.unique = function() { 
    var data = []; 
    var a = {}; //声明一个对象,javascript的对象可以当哈希表用 
    for (var i = 0; i < this.length; i++) { 
     if(!a[this[i]]){ 
      a[this[i]] = true; 
      data[data.length] = this[i]; 
     } 
    } 
    return data; 
   }
 }

 //(扩展) - getElementsByClass 通过class获取元素对象;
 if (!document.getElementsByClass) {
  document.ext={
   getElementsByClass:function(classname,o){
    var elements = [];
    var alltags = null;
    if(o){
     alltags = o.all ? o.all : o.getElementsByTagName("*");
    }else{
     alltags = document.all ? document.all : document.getElementsByTagName("*");
    }
    for (var i=0; i<alltags.length; i++) {
     if(typeof alltags[i].className === "string"){
      var classNames = (alltags[i].className).split(" ");
      if (classNames.contains(classname) && classname != '')
       elements[elements.length] = alltags[i];
     }
    }
    return elements.length==0 ? null : elements;
   }
  };
 }


/************************************************ 自定义 ************************************************************/
 //Map的构造函数 
    function Map(){  
        this.container = new Object();
    }  
    //添加一个键-值  
    Map.prototype.put = function(key, value){  
        this.container[key] = value;
    }
    //通过键获取一个值   
    Map.prototype.get = function(key){
  if(!this.container)
   return null;
  return this.container[key] ? this.container[key] : null;
    }
 //返回该Map对象的键集合
    Map.prototype.keySet = function() {
        var keyset = new Array();
        var count = 0;
        for (var key in this.container) {
            if (key == 'extend' || key == 'event')
                continue;
            keyset[count] = key;
            count++;
        }
        return keyset;
    }
 //删除一个键值对
 Map.prototype.remove = function(key) {
  delete(this.container[key]);
 }
 //清空所有键值对
 Map.prototype.removeAll = function(){
  delete(this.container);
 }
 //返回该Map对象的大小 
    Map.prototype.size = function() {
        var size_count = 0;
        for (var key in this.container) {
            // 跳过object的extend函数、event事件(opera浏览器才会出现:event=[object MouseEvent])
            if (key == 'extend' || key == 'event')
    continue;
            size_count++;
        }
        return size_count;
    }
    //返回该Map对象的字符串形式,以分号分隔
    Map.prototype.toString = function(){  
        var str = "";  
        for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
            str = str + keys[i] + "=" + this.container[keys[i]] + ";";  
        }
        return str.substring(0,str.length-1);  
    }

 //test

 document.onclick=function(){
  /*
  var a = new Array("5","7","7"); 
  alert(a);
  alert(a.unique());
  */

  /*var map = new Map();
  map.put('a1','铁钉');
  map.put('a2','铁锤');
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());

  map.remove('a1');
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());
  
  map.removeAll();
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());*/
 }

/************************************************************************************************************/
</script>
</head>

<body>

<style>
 a:visited{text-decoration:none; color:#4782C8;}
 a:link{text-decoration: none; color:#4782C8;}
 a:hover{text-decoration:underline; color:#F69127;}
 a:active{text-decoration:none; color:#4782C8;}
 
 #list_1{position:absolute;left:1%;top:60px;}
 #list_2{position:absolute;left:26%;top:60px;}
 #list_3{position:absolute;left:55%;top:60px;}
 #list_4{position:absolute;left:75%;top:60px;}
</style>

<div id="list_1">
 <h2>兼容js</h2>
 <a href="javascript:;" onclick="alert(window.event);">event</a><br/>
 <a href="javascript:;" onclick="alert('x:'+event.x+'\ny:'+event.y);">event.x,event.y</a><br/>
 <a href="javascript:;" onclick="alert(event.srcElement.id);">event.srcElement.id</a><br/>
 <a href="javascript:;" onclick="alert('x:'+event.clientX+'\ny:'+event.clientY);">event.clientX,event.clientY</a><br/>
 <a href="javascript:;" onclick="alert('offsetX:'+event.offsetX+'\noffsetY:'+event.offsetY);">event.offsetX,event.offsetY</a><p>

 <a href="javascript:;" onclick="alert(this.runtimeStyle);">HTMLElement.runtimeStyle</a><br/>
 <a href="javascript:;" onclick="alert(this.canHaveChildren);">HTMLElement.canHaveChildren</a><br/>
 <a href="javascript:;" onclick="alert(this.outerHTML);">HTMLElement.outerHTML</a><br/>
 <a href="javascript:;" onclick="alert(this.innerText);">HTMLElement.innerText</a><br/>
 <a href="javascript:;" onclick="alert(this.currentStyle);">HTMLElement.currentStyle</a><br/>
 <a href="javascript:;" onclick="alert(this.all);">HTMLElement.all</a><br/>
 <a href="javascript:;" onclick="alert(this.parentElement);">HTMLElement.parentElement</a><br/>
 <a href="javascript:;" onclick="alert(this.children);">HTMLElement.children</a><br/>
 <a href="javascript:;" onclick="alert(this.outerText);">HTMLElement.outerText</a><br/>
 <a href="javascript:;" onclick="alert(this.contains(document.getElementById('a_f')));" ><font id="a_f" >HTMLElement.contains(Node)</font></a><br/>
 <a href="javascript:;" id="theAttach" >HTMLElement.attachEvent</a><br/>
 <a href="javascript:;" id="theDetach" >HTMLElement.detachEvent</a><br/>
 <a href="javascript:;" onclick="javascritp:this.insertAdjacentElement('beforeBegin',document.createElement('input'));">HTMLElement.insertAdjacentElement</a><br/>
 <a href="javascript:;" onclick="javascritp:this.insertAdjacentHTML('beforeBegin','<font color=\'blue\'>html标签</font>');">HTMLElement.insertAdjacentHTML</a><br/>
 <a href="javascript:;" onclick="javascritp:this.insertAdjacentText('beforeBegin','插一段文本');">HTMLElement.insertAdjacentText</a><p>

 <a href="javascript:;" id="node_1"  onclick="removeNode(this);">Node.removeNode(Node)</a><br/>
 <a href="javascript:;" onclick="replaceNode(document.createElement('input'))">Node.replaceNode(Node)</a><br/>
 <a href="javascript:;" id="node_3" onclick="javascript:this.swapNode(document.getElementById('node_1'));" >Node.swapNode(Node)</a><br/>
 <button onmouseout="event_test(this)">MouseOut</button><button onmouseover="event_test(this)">MouseOver</button><p>

 editable(this,'on/off')<br/>
 <iframe id="editor" src="about:blank" width="200" height="50" scrolling="auto" onload="editable(this,'on');" ></iframe><p>
 autoheight(this)<br/>
 <iframe  id="iframe_id" src="top.html"  width="200" scrolling="no" onload="autoheight(this);" ></iframe><br/>
</div>

<div id="list_2">
 <h2>扩展js</h2>
 <a href="javascript:;" class="a_class" onclick="alert(document.ext.getElementsByClass('input_class')[0].value);">document.ext.getElementsByClass(class)</a><p>

 <span style="color:red;">String</span>.trim
 <input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.trim();"/><br/>
 <span style="color:red;">String</span>.lTrim
 <input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.lTrim();"/><br/>
 <span style="color:red;">String</span>.rTrim
 <input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.rTrim();"/><br/>
 <span style="color:red;">String</span>.initialsToUpper
 <input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.trim().initialsToUpper();"/><p>

 <span style="color:red;">String</span>.isMobile <input type="text" value="15201114609" onblur="this.value = this.value.isMobile();"/><br/>
 <span style="color:red;">String</span>.isEmail <input type="text" value="[email protected]" onblur="this.value = this.value.isEmail();"/><br/>
 <span style="color:red;">String</span>.isPhone <input type="text" value="0312-6716554" onblur="this.value = this.value.isPhone();"/><br/>
 <span style="color:red;">String</span>.isPost <input type="text" value="100000" onblur="this.value = this.value.isPost();"/><br/>
 <span style="color:red;">String</span>.isIdCard <input type="text" value="130628196545863265" onblur="this.value = this.value.isIdCard();"/><br/>
 <span style="color:red;">String</span>.isBank <input type="text" value="1234567890123456" onblur="this.value = this.value.isBank();"/><br/>
 <span style="color:red;">String</span>.isUrl <input type="text" value="www.google.cn" onblur="this.value = this.value.isUrl();"/><br/>
 <span style="color:red;">String</span>.isEmpty <input type="text" value="" onblur="this.value = this.value.isEmpty();"/><p>

 <span style="color:red;">Array</span>.indexOf<br/>
 <span style="color:red;">Array</span>.contains<br/>
 <span style="color:red;">Array</span>.add<br/>
 <span style="color:red;">Array</span>.remove<br/>
 <span style="color:red;">Array</span>.unique<p>
</div>

<div id="list_3">
 <h2>自定义js</h2>
 var map = new Map();<br/>
 map.put('a1','铁钉');<br/>
 map.size();<br/>
 map.get('a1');<br/>
 map.get('a2');<br/>
 map.toString();<br/>
 map.remove('a1');<br/>
 map.removeAll();<br/>
</div>

<div id="list_4">
 <h2>宽、高属性列表</h2>
 <a href="javascript:;" id="" onclick="alert(document.body.clientWidth);" >document.body.clientWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.clientHeight);" >document.body.clientHeight</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.offsetWidth);" >document.body.offsetWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.offsetHeight);" >document.body.offsetHeight</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.scrollWidth);" >document.body.scrollWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.scrollHeight);" >document.body.scrollHeight</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.scrollLeft);" >document.body.scrollLeft</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.body.scrollTop);" >document.body.scrollTop</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screenTop);" >window.screenTop</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screenLeft);" >window.screenLeft</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screen.width);" >window.screen.width</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screen.height);" >window.screen.height</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screen.availWidth);" >window.screen.availWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(window.screen.availHeight);" >window.screen.availHeight</a><br/>

 <a href="javascript:;" id="" onclick="alert(document.documentElement.clientHeight);" >document.documentElement.clientHeight</a><br/>
 <a href="javascript:;" id="" onclick="alert(document.documentElement.clientWidth);" >document.documentElement.clientWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(this.clientHeight);" >document.clientHeight</a><br/>
 <a href="javascript:;" id="" onclick="alert(this.clientWidth);" >document.clientWidth</a><br/>
 <a href="javascript:;" id="" onclick="alert(event.screenX);" >event.screenX</a><br/>
 <a href="javascript:;" id="" onclick="alert(event.screenY);" >event.screenY</a><br/>
</div>
<script>
 //-------例子:attachEvent-------
 var theAttach = document.getElementById("theAttach");
 var theDetach = document.getElementById("theDetach");
 theAttach.attachEvent("onclick", buttonClicked);
 theDetach.attachEvent("onclick", delete_event);
 function buttonClicked(e){
  alert("添加某个事件"); 
 }
 //-------例子:detachEvent-------
 function delete_event(){
  alert("删除某个事件");
  theAttach.detachEvent("onclick",buttonClicked);
 }
 //-------例子:event.srcElement.fromElement.toElement-------
 function event_test(obj){
  alert("event:"+ event +"\n srcElement:"+event.srcElement.innerHTML+"\n fromElement:"+event.fromElement.innerHTML + "\n toElement:"+event.toElement.innerHTML)
 }
 
</script>

</body>
</html>

你可能感兴趣的:(浏览网兼容)