js浏览器各种位置检测

浏览数：27 / 时间：2015年06月09日

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>属性检测</title>
  <style>
  *{margin: 0;padding:0;border:none;}
 #tip{
  width:400px;
  height:300px;
 }
 #T{
  width:400px;
  height:200px;
  margin-left:10px;
  margin-top: 10px;
  border-width: 100px;
  border-style: solid;
  border-top-color: blue; 
  border-right-color: red;
  border-bottom-color: orange;
  border-left-color:black;
  background: green;
  padding-left: 100px;
  padding-top: 100px;
  text-align:left;
  padding-left-color: white;
  color:orange;
  overflow: scroll;
 }
 body{

 }
  </style>
 </head>
 <body>
 <textarea id=‘tip‘></textarea>
 <div id=‘T‘>
 12312123112312123123121231123121231231212311231212312312123112312123
 </div>
<script type="text/javascript">
var T=document.getElementById(‘T‘);
  T.onmousemove=function(e){
    var T=document.getElementById(‘T‘);
    var clientWidth=T.clientWidth;
    var clientHeight=T.clientHeight;
    var offsetWidth=T.offsetWidth;
    var offsetHeight=T.offsetHeight;
    var scrollWidth=T.scrollWidth;
    var scrollHeight=T.scrollHeight;
    var scrollTop=T.scrollTop;
    var scrollLeft=T.scrollLeft;
    var screenTop=window.screenTop?window.screenTop:window.screenY;//火狐screenX 
    var screenWidth=window.screen.width;
    var availWidth=window.screen.availWidth;
    var offsetLeft=T.offsetLeft;
    var offsetTop=T.offsetTop;
    var clientTop=T.clientTop;
    var offsetParent=T.offsetParent;
    var pageX=e.pageX;
    var pageY=e.pageY;
    var clientX=e.clientX;
    var clientY=e.clientY;
    var screenX=e.screenX;
    var offsetX=e.offsetX;
    var offsetY=e.offsetY;

    var tip="clientWidth:"+clientWidth+" clientHeight:"+clientHeight+"\r\n";
    tip+="offsetWidth:"+offsetWidth+"   offsetHeight:"+offsetHeight+"\r\n";
    tip+="scrollWidth:"+scrollWidth+"   scrollHeight:"+scrollHeight+"\r\n";
    tip+="scrollTop:"+scrollTop+"    scrollLeft:"+scrollLeft+"\r\n";
    tip+="screenTop:"+screenTop+"\r\n";
    tip+="screen.width:"+screenWidth+"\r\n";
    tip+="screen.availWidth:"+availWidth+"\r\n";
    tip+="offsetLeft:"+offsetLeft+"   offsetTop:"+offsetTop+"\r\n";
    tip+="clientTop:"+clientTop+"\r\n";
    tip+="offsetParent:"+offsetParent+"\r\n";
    tip+="pageX:"+pageX+"   pageY:"+pageY+"\r\n";
    tip+="clientX:"+clientX+"   clientY:"+clientY+"\r\n";
    tip+="offsetX:"+offsetX+"    offsetY:"+offsetY+"\r\n";
    document.getElementById(‘tip‘).value=tip;
  }

</script>



 </body>
</html>