偏移量、客户区大小、视口大小、滚动大小、确定元素大小
1、偏移量 先讲几个偏移量属性： offsetHeight：元素在垂直方向上占用的空间大小；相当于border-top+padding-top+height+padding-bottom+border-bottom offsetWidth：元素在水平方向上占有的空间大小；相当于botder-left+padding-left+width+padding-right+border+right offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。 offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。
获取某个元素在页面上的偏移量：
function getElementLeft(element){
var actualLeft=element.offsetLeft;
var current=element.offsetParent;
while(current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current !== element.offsetParent){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}2、客户区大小 客户区大小指的是元素内容及其内边距所占空间的大小。 两个属性： clientWidth：width+左右内边距 clientHeight：height+上下内边距
alert(someElement.clientWidth);3、视口大小 ①innerWidth和innerHeight表示视口大小（不包含ie8） IE8及更早版本通过DOM提供了页面可见区域： ② document.documentElement.clientWidth和document.documentElement.clientHeight（标准模式） document.body.clientWidth和document.clientHeight（混杂模式）
取得视口大小的跨浏览器的解决方案：
var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}4、滚动大小 就是指包含滚动内容的元素大小。像textarea、html这些元素，当内容超过所设置的宽高后，就会出现一个滚动条，滚动大小的计算差不多就是指把元素内容平铺后的大小。 scrollHeight：在没有滚动条的情况下（平铺开），内容的总高度。 scrollWidth：在没有滚动条的情况下（平铺开），内容的总宽度。 （上面两者主要是用于确定内容的实际大小） scrollLeft：被隐藏在内容区域左侧的像素数。 scrollTop：被隐藏在内容区域上方的像素数。 （上面两者既可以确定元素当前滚动的状态，也可以设置元素的滚动位置）
5、确定元素的大小 getBoundingClientRect( )方法，这个方法会返回一个矩形对象，包含4个属性left、top、right和bottom，给出了元素在页面中相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括ie9则将(0,0)作为起点坐标，所以用函数使用它自身的属性来确定是否要对坐标进行调整。 ②一般来说，right与left的差值与offsetWidth相等；同理，bottom与top的差值与offsetHeight相等。 所以跨浏览器的函数可以写成：
function getBoundingClientRect(element){
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scrollLeft;
if(element.getBoundingClientRect){
if(typeof arguments.callee.offset != "number"){
var scrollTop=document.documentElement.scrollTop;
var temp=document.createElement("div");
temp.style.cssText="position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
document.body.removeChild(temp);
temp=null;
}
var rect=element.getBoundingClientRect();
var offset=arguments.callee.offset;
return{
left:rect.left+offset,
right:rect.right+offset,
top:rect.top+offset,
bottom:rect.bottom+offset
};
}else{
var actualLeft=getElementLeft(element);
var actualTop=getElementTop(element);
return{
left:actualLeft-scrollLeft,
right:actualLeft+element.offsetWidth-scrollLeft,
top:actualTop-scrollTop,
bottom:actualTop+element.offsetHeight-scrollTop
}
}
}腾讯云开发者
