offset、client、scroll
3组合大小、位置相关的属性
offset 偏移量
1. 获取坐标(距离offsetParent的横向纵向偏移)
- offsetLeft属性
- offsetTop属性
2. 获取大小(包括边框和padding)
- offsetWidth属性
- offsetHeight属性
偏移量
- offsetParent用于获取定位的父级元素,没有定位父元素此时是body
- offsetParent和parentNode的区别
client
1. 获取border-left的宽度(边框的宽度)
- clientLeft属性
- clientTop属性
2. 获取大小(包括padding,不包括边框,不包括滚动条)
- clientWidth属性
- clientHeight属性
scroll
1. Left / Top(内容滚动出去的距离而不是滚动条top的距离)
- scrollLeft属性
- scrollTop属性
2. width / height(内容的大小,包括padding和未显示的内容,不包括滚动条)
- scrollWidth属性
- scrollHeight属性
## 案例:拖拽
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
<script>
var box = document.getElementById('d_box');
var drop = document.getElementById('drop');
drop.onmousedown = function (e) {
// 兼容性处理
e = e || window.event;
// 当鼠标按下的时候,求鼠标在盒子中的位置
// 鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子的位置
var x = getPage(e).pageX - box.offsetLeft;
var y = getPage(e).pageY - box.offsetTop;
// 鼠标在文档中移动
document.onmousemove = function (e) {
e = e || window.event;
// 当鼠标在页面上移动的时候。求盒子的坐标
// 盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子中的位置
var boxX = getPage(e).pageX - x;
var boxY = getPage(e).pageY - y;
box.style.left = boxX + 'px';
box.style.top = boxY + 'px';
}
}
// 当鼠标弹起的时候,移除鼠标移动事件
document.onmouseup = function () {
document.onmousemove = null;
}
// 点击关闭按钮,隐藏盒子
var box_close = document.getElementById('box_close');
box_close.onclick = function () {
box.style.display = 'none';
}
// 处理pageX和pageY的兼容
function getPage (e) {
var pageX = e.pageX || e.clientX +scroll().left;
var pageY = e.pageY || e.clientY + scroll().top;
return {
pageX:pageX,
pageY:pageY
}
}
// 处理scrollTop和scrollLeft的兼容
function scroll(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
var left = document.body.scrollLeft || document.documentElement.scrollLeft;
return {
top:top,
left:left
}
}
</script>
</body>
</html>