js浏览器各种位置检测 

<!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>

Js位置定位控制

某个盒子:出现滚动条时 可见宽度=(width-滚动条宽度)

某个元素下的属性

clientWidth:可见区域的宽度=(width-滚动条宽度(有时)+padding)

clientTop: 获取对象的border宽度

offsetWith:(border+width+padding)

offsetLeft: 当前对象到其上级层左边的距离

offsetParent:获取当前对象的上级层对象

scrollWidth:网页正文全文宽=(没滚动条时=clientWidth,没滚条时=client+拉动滚条才能看到的区域)

scrollLeft:有滚条时左边被隐藏的长度

scrollWidth=(scrollLeft(拉到最右时)+clientWidth)

下面事件属性

window.screenTop(只读属性)浏览器窗口上边距屏幕顶端距离(适用与chrome firefox下screenX,IE下是网页正文距屏幕上边界距离(scrollTop))

window.screen.width(屏幕分辨率)

window.screen.availWidth(屏幕可用工作区宽度等于分辨率宽)

window.pageX:鼠标的横坐标以当前文档开始为基准(以当前整个文档为基准(包括margin,border,padding等))

window.clientX:鼠标的横坐标以当前浏览器窗口为基准

没滚动条时pageX=clientX;

IE没pageX

在ie下pageX=clientX+scrollTop-clientTop(border-width (chrome测试无需减掉))

window.offsetX(鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点)

与clientX区别(clientX以浏览器窗口为基准)

posted @ 2014-08-20 22:54  H&K  阅读(789)  评论(0)  编辑  收藏  举报