<!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以浏览器窗口为基准)