offsetHeight ,offsetWidth ,offsetLeft offsetTop clientWidth clientHeight scrollHeight scrollWidth scrollLeft scrollTop

offsetHeight ,offsetWidth ,offsetLeft offsetTop clientWidth clientHeight scrollHeight scrollWidth scrollLeft scrollTop，返回的都是纯数字

1、元素的偏移量

元素的可见大小是由其高度、宽度决定，包括所有的内边距、滚动条和边框大小（不包括外边距）。

offsetHeight ：元素在垂直方向上占用的空间大小，以像素计算。包括元素的高度，水平滚动条高度，上下边框高度。

offsetWidth ：元素在水平方向上占用的空间大小，以像素计算。包括元素的宽度，垂直滚动条高度，左右边框高度。

offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离。

offsetParent ：元素的包含元素，找离自己最近有定位的父元素。元素的offsetParent不一定和parentNode相等。例如，<td>元素的offsetParent是祖先元素<table>，因为<table>是在DOM层次中距离<td>最近的一个具有大小的元素。

返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

偏移量属性是只读属性，每次访问都需要重新计算。

 function getElementLeft(element){
     var actualLeft = element.offsetLeft;
     var current = element.offsetParent;

     while(current != null){  // 循环至根元素 body
         actualLeft += current.offsetLeft;
         current = current.offsetParent;
     }

     return actualLeft;
 }

 function getElementTop(element){
      var actualTop = element.offsetTop;
      var current = element.offsetParent;

      while(current != null){  // 循环至跟元素 body
          actualTop += current.offsetTop;
          current = current.offsetParent;
      }

      return actualTop;
 }

上述两个方法在简单的页面布局中，结果很准确，但对于使用表格和内嵌框架布局的页面，不同浏览器实现不同，结果也会有些不同。

function getElementTopToRoot(element,root){

    if(root != undefined && element == root){
        return 0;
    }
    if(root == undefined){
        root = null
    }

    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while(current != root && current != null){  // 循环至根元素
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}
function getElementLeftToRoot(element,root){

    if(root != undefined && element == root){
        return 0;
    }
    if(root == undefined){
        root = null
    }

    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while(current != root && current != null){  // 循环至根元素
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

2、元素的客户区大小

元素的客户区大小值得是元素内容及其内边距所占据的空间大小，不计滚动条所占空间。

clientWidth ：元素内容区宽度加左右内边距的宽度

clientHeight ：元素内容区高度加上下内边距的高度

这个最常用来确定浏览器视口的大小。客户区大小是只读属性，每次访问都需要重新计算。

3、滚动大小

滚动大小指的是包含滚动内容的元素大小。

scrollHeight ：滚动元素高度，没有滚动条的情况下，是元素内容的总高度

scrollWidth ：滚动元素的宽度，没有滚动条的情况下，是元素内容的总宽度

scrollLeft ：被隐藏在内容区左侧的宽度，可读可设置

scrollTop ：被隐藏在内容区上方的高度，可读可设置

//获取文档总高度/总宽度
 function getPageDimension(){
     if(document.compatMode == "BackCompat"){  // 混杂模式
         return {
             width:Math.max(document.body.scrollWidth,document.body.clientWidth),
             height:Math.max(document.body.scrollHeight,document.body.clientHeight)
         };
     } else {
         return {
             width:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
             height:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
         }
     }
 }

 //将元素回滚到顶部
 function scrollToTop(element){
     if(element.scrollTop != 0){
         element.scrollTop = 0;
     }
 }

4、元素大小

IE、Firefox、Safari、Opera、Chrome为每个元素都提供了一个getBoundingClientRect() 方法。返回一个矩形对象，表示元素相对于视口的位置，有四个属性：

left：元素左边框至视口的左侧的距离

right：元素右边框至视口左侧的距离

top：元素上边框至视口上侧的距离

bottom：元素下边框至视口上侧的距离

所以，right - left 是元素的宽度，bottom - top 是元素的高度

 function getBoundingClientRect(element){
     var scrollTop = document.documentElement.scrollTop;
     var scrollLeft = document.documentElement.scrollLeft;

     if(element.getBoundingClientRect){
         if(typeof arguments.callee.offset != "number"){
             var temp = document.createElement("div");  // IE8 - 中文档左上角的坐标是（2，2），其他是（0，0）
             temp.style.position = "absolute";
             temp.style.left = "0px";
             temp.style.top = "0px";
             //temp.style.cssText = "position:absolute;left:0;top:0";
             document.body.appendChild(temp);
             arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
             document.body.removeChild(temp);
         }

         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
       }
     }
 }

来源：https://www.cnblogs.com/zhanglw456/p/10538664.html

标签

element

scrolltop