offset、client 、scroll

三组和大小、位置相关的属性

offset、client、scroll

• offset系列属性：offset为偏移量。用于获取如div的坐标（box.offsetLeft; box.offsetTop;）,而获取div的大小用（box.offsetWidth;  box.offsetHeight这两属性包括盒子的边框和内边距padding）。还存在offsetParent属性：指获取距离当前元素最近的定位父元素，如果没有定位父元素则默认为body。如若存在三个盒子相互依次叠加，则box.offsetParent/Left/Top等的获取数值都是相对相邻最近的父盒子而言。
• client 系列属性： 与offset一样有四个属性，但是在获取div盒子的大小上，clientLeft获取的是border-left的宽度；clentTop获取的是border-top的宽度；而clientWidth获取的大小包括padding但不包括边框的宽度；clientHeight获取的也同样包括padding不不包括边框的高度（有滚动条的话，也包括滚动条）   
• scroll系列的属性： scrollLeft和scrollTop指内容中滚动出去的距离      scrollWidth和scrollHeight获取的大小包括padding，但是不包括滚动条

案例之按下鼠标拖拽盒子

var box = document.getElementById('box');
var drop = document.getElementById('drop');    //鼠标点击盒子可实现拖拽的区域

drop.onmousedown = function (e) {    //鼠标按下的事件
    //鼠标按下的时候，鼠标在盒子中的位置：鼠标在页面上的位置-盒子的位置
    var x = e.pageX - box.offsetLeft;
    var y = e.pageY - box.offsetTop;

    //鼠标在文档中移动的事件
    document.onmousemove = function (e) {    //别忘了该对象e有兼容性问题
        //当鼠标在页面上移动时，盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子上的位置
        var boxX = e.pageX - x;
        var boxY = e.pageX - y;

        box.style.left = boxX + 'px';    //盒子移动的距离等于盒子的坐标，即跟着鼠标走
        box.style.top = boxY + 'px';    
    }
    
}
//当鼠标弹起的时候，移除鼠标移动事件
document.onmouseup = function () {
    document.onmousemove = null;
}
//点击关闭按钮，隐藏盒子
var box_close = document.getElementById('box_close');    //获取该关闭按钮的id
box_close.onclick = function () {
    box.style.display = 'none';    //点击按钮时，隐藏盒子
}

案例之弹出对话框可拖拽且有突出功能

该案例类似百度首页的点击按钮有会员登陆的弹出对话框，且弹出后背景为灰色并且不可操作，该对话框还可随鼠标拖拽移动

//显示登陆框和遮盖层
var login = document.getElementById('login');
var bg = document.getElementById('bg');    //遮盖层div的id，用于弹出对话框后背景不可操作
//1.点击按钮，弹出对话框和遮盖层
var link = document.getElementById('link');    //link为点击按钮弹出对话框的id
link.onclick = function () {
    login.style.display = 'block';    //弹出login
    bg.style.display = 'block';    //点击后弹出遮盖层
    return false;    //取消默认行为之跳转到href
}

//2.点击关闭按钮，隐藏登陆框和遮盖层
var closeBtn = document.getElementById('closeBtn');
close.onclick = function () {
    //隐藏登录框和遮盖层
    login.style.display = 'none';
    bg.style.display = 'none';
}

后面代码的鼠标拖拽盒子移动如上案例，此处不再复述