JavaScript的封装
1、对于位置获取和宽高获取
- offset系列
- offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。 (包括边框)
- offsetTop:获取对象相对于版面或由offsetParent属性指定的父坐标的顶部位置。(包括边框)
- offsetWidth:获取对象的宽度。(offsetWidth = width+padding+scrollbar+border)
- offsetHeight:获取对象的高度。(offsetHeight = height+padding+scrollbar+border)
- client系列
- clientLeft:获取对象的左边框的宽度。
- clientTop:获取对象的上边框的高度。
- clientWidth:获取对象的内容可视区域的宽度。(clientWidth=width+padding,不包括滚动条)
- clientHeight:获取对象的内容可视区域的高度。 (clientHeight=height+padding,不包括滚动条)
- scroll系列
- scrollLeft:设置或获取对象最左端和对象内容的最左端之间的距离。
- scrollTop:设置或获取对象最顶端和对象内容的最顶端之间的距离。
- scrollWidth:获取对象内容的实际宽度,即对象的滚动宽度。
- scrollHeight:获取对象内容的实际高度,即对象的滚动高度。
2、对于各种位置的描述图像化
3、封装
对于封装,我们首先需要了解一下这些方法的兼容性。其实对于这个的兼容性主要是event和window.event的兼容,如下便是对于这个的兼容性。
var evt = {
//window.event和时间参数e的兼容
getEvent: function (event) {
return event || window.event;
},
//可视区域的横纵坐标的兼容
getClientX: function (event) {
return this.getEvent(event).clientX;
},
getClientY: function (event) {
return this.getEvent(event).clientY;
},
//页面卷曲的距离兼容
getScrollLeft: function (event) {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
},
getScrollTop: function (event) {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
},
getPageX: function (event) {
if (this.getEvent(event).pageX) {
return this.getEvent(event).pageX;
} else {
return this.getClientX(event) + this.getScrollLeft();
}
},
getPageY: function (event) {
if (this.getEvent(event).pageY) {
return this.getEvent(event).pageY;
} else {
return this.getClientY(event) + this.getScrollTop();
}
}
};