<!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+" "; tip+="offsetWidth:"+offsetWidth+" offsetHeight:"+offsetHeight+" "; tip+="scrollWidth:"+scrollWidth+" scrollHeight:"+scrollHeight+" "; tip+="scrollTop:"+scrollTop+" scrollLeft:"+scrollLeft+" "; tip+="screenTop:"+screenTop+" "; tip+="screen."+screenWidth+" "; tip+="screen.availWidth:"+availWidth+" "; tip+="offsetLeft:"+offsetLeft+" offsetTop:"+offsetTop+" "; tip+="clientTop:"+clientTop+" "; tip+="offsetParent:"+offsetParent+" "; tip+="pageX:"+pageX+" pageY:"+pageY+" "; tip+="clientX:"+clientX+" clientY:"+clientY+" "; tip+="offsetX:"+offsetX+" offsetY:"+offsetY+" "; 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以浏览器窗口为基准)