一.js获取页面各种距离
1.screen系列
-
screen.width:屏幕的宽度 -
screen.height:屏幕的高度
2.style系列（必须是行内设置样式才有效）
-
element.style.width：当前对象的宽度。 -
element.style.height：当前对象的高度。 -
element.style.left：当前对象的left值。 -
element.style.top：当前对象的top值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{height: 1900px;background: #000;}
</style>
</head>
<body>
<!--设置百分百宽度-->
<div class="wrap" id="wrap" style="width: 80%"></div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var styleW=wrap.style.width;
var styleH=wrap.style.height;
var oW=wrap.offsetWidth;
console.log(styleW);//返回80%
console.log(styleH);//没有在行内样式设置，无效，返回空值
console.log(oW);//返回的是数字
}
</script>
</body>
</html>
3.offset系列
-
element.offsetParent：当前对象的上级层对象。 -
element.offsetWidth：当前对象的宽度。（width+padding+border） -
element.offsetHeight：当前对象的高度。（Height+padding+border） -
element.offsetLeft：当前对象到其上级层左边的距离 。 -
element.offsetTop：当前对象到其上级层上边的距离 。 -
element.offsetWidth和style.width区别：
1.style.width返回值除了数字外还带有单位px；
2.如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3.如果没有给 HTML 元素指定过 width样式，则style.width返回的是空字符串；
4.style.width不包含border和padding。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{width: 600px;height: 600px;background: #000;border: 3px solid green;position: relative;}
.box{width:300px;height: 400px; border: 5px solid #fff;padding:5px;margin: 30px}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="box" id="box"></div>
</div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var box=document.getElementById("box");
var oW=box.offsetWidth;
var oT=box.offsetTop;
console.log(oW);//返回320,包含padding+border+width
console.log(oT);//返回30,不包含父级的border
}
</script>
4.client系列
-
element.clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框； -
element.clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框； -
element.clientLeft: 获取对象的border宽度 -
element.clientTop：获取对象的border高度
5.scroll系列
-
element.scrollWidth:获取对象的滚动宽度 。 -
element.scrollHeight: 获取对象的滚动高度。 -
element.scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体) -
element.scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{width: 600px;height: 600px;border: 3px solid green;position: relative;}
.box{width:300px;height: 400px; border: 3px solid red;padding:5px;margin: 30px;overflow: auto;}
.box p{font-size: 20px;line-height: 36px;}
</style>
</head>
<body>
<!-- 设置父级 -->
<div class="wrap" id="wrap">
<div class="box" id="box">
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var box=document.getElementById("box");
var oW=box.offsetWidth;
var oH=box.offsetHeight;
var oT=box.offsetTop;
var cW=box.clientWidth;
var cH=box.clientHeight;
var cT=box.clientTop;
console.log('box.offsetWidth:'+oW);//返回box.offsetWidth:316
console.log('box.offsetHeight:'+oH);//返回box.offsetHeight:416
console.log('box.offsetTop:'+oT);//返回box.offsetTop:30
console.log('box.clientWidth:'+cW);//返回box.clientWidth:293
console.log('box.clientHeight:'+cH);//返回box.clientHeight:410
console.log('box.clientTop:'+cT);//返回box.clientTop:3
console.log('box.scrollWidth:'+sW);//返回box.scrollWidth:293
console.log('box.scrollHeight:'+sH);//返回box.scrollHeight:1018
}
</script>
</body>
</html>
document.body和document.documentElement兼容问题
- body是DOM对象里的body子节点，即 <body> 标签；documentElement 是整个节点树的根节点root，即<html> 标签；
- 整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中可以写：document.body。
- 参考链接 clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
- JS中完美兼容各大浏览器的scrolltop方法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
二.js获取页面坐标数据
1.client系列
-
event.clientX:设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 -
event.clientY: 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
2.screen系列
-
event.screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 -
event.screenY： 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
3.offset系列
-
event.offsetX：,鼠标相比较于触发事件的元素的X位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。 -
event.offsetY：同上，Y位置。
4.layer系列（IE8以及以下版本没有）
-
event.layerX：鼠标相比较于当前坐标系的X位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点 -
event.layerY：同上，Y位置。
5.XY系列（FF没有）
-
event.x：相对可视区域的X坐标 -
event.y：相对可视区域的Y坐标
6.page系列 （IE8以及以下版本没有）
- 类似于
event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。。 -
event.pageX：设置或获取鼠标指针位置相对于当前文档的 x 坐标 -
event.pageY：设置或获取鼠标指针位置相对于当前文档的 y 坐标
document.onclick = function(e){
e = e || window.event;
console.log('e.clientX:',e.clientX);
console.log('e.screenX:',e.screenX);
console.log('e.offsetX:',e.offsetX);
console.log('e.layerX:',e.layerX);
console.log('e.pageX:',e.pageX);
console.log('e.x:',e.x);
}
三、jQuery对应写法
- 参考链接 js、jq获取对象位置 对象宽高
整理了这么多，复习了一遍有些概念在心中归类更明确了点，如有错误，欢迎指证。
