您的位置：首页 > Web前端 > JavaScript

js浏览器各种位置检测

2014-08-20 22:54 393 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航