JS & jQuery 获取元素位置尺寸

jQuery

位置

• offset: 获取匹配元素在当前视口的相对偏移
• position: 获取匹配元素相对父元素的偏移
• scrollTop: 获取匹配元素相对滚动条顶部的偏移
• scrollLeft: 获取匹配元素相对滚动条左侧的偏移

尺寸

• height: 取得匹配元素当前计算的高度值
• width: 取得第匹配元素当前计算的宽度值
• innerHeight: 获取第匹配元素内部区域高度（包括补白、不包括边框）
• innerWidth: 获取第匹配元素内部区域宽度（包括补白、不包括边框）
• outerHeight: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内
• outerWidth: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内

JS

window

• window.innerWidth/innerHeight: 浏览器可视窗口宽度, 高度(不含浏览器的边框，但包含滚动条, 调出debug工具会减去其宽高).
• window.outerWidth/outerHeight：整个浏览器宽度, 高度(包含浏览器的边框，因各个浏览器的边框不一样，得到的值也是不一样的).
• window.screenLeft/screenTop:
  • ie浏览器的内边缘距离屏幕边缘的距离
  • chrome浏览器的外边缘距离屏幕边缘的距离
• window.screenX/screenY:
  • ie9/10浏览器的外边缘距离屏幕边缘的距离
  • chrome浏览器的外边缘距离屏幕边缘的距离
    由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox，两个属性都兼备了，但更趋向于firefox，chrome的这种做法不止这一处，还有很多，其实这种做法便于开发者移植，但对开发者的开发过程产生了一定的混淆），ie9/10的screenLeft是大于screenX的.
• window.pageXOffset/pageYOffset: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离
  兼容：ie9/10、chrome、firefox
• window.scrollX/scrollY: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具体为什么会出现两个相等的属性值，不得而知
  兼容：chrome、firefox
  偏移距离是指页面被向上滑动, 向左滑动超出浏览器窗口部分的高度和宽度

screen

• screen.width/height: 屏幕的宽度、高度(指的是屏幕的分辨率，单位为像素, 不是浏览器窗口)
  此处必须是screen.width，而不是screenWidth，与接下来要说的各种宽度有所区别
• screen.availWidth/availHeight: 屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致, 有时要减去任务栏或Mac-OS系统上面导航条宽高)

元素属性

• clientHeight, clientWidth属性:

  • 有滚动条时: clientWidth=内边距宽度+内容宽度-元素垂直滚动条宽度
  • 无滚动条时: clientWidth=内边距宽度+内容宽度
    滚动条一般会在边框内出现

• clientLeft, clientTop: clientLeft为左边框宽度，clientTop为上边框宽度

• offsetWidth/offsetHeight属性: 边框宽度+内边距宽度+内容宽度

  #box {
    margin: 10px;
    border: 10px solid black;
    padding: 10px;
    width: 50px;
    height: 50px;
    background: gray; 
  }
  

• offsetLeft/offsetTop: 表示该元素相对于最近的定位祖先元素的距离.
  • 定位指的是position: relative|absolute|fixed, 没有定位父元素则相对于整个文档的边缘.
  • 距离是定位父元素边框内边, 到当前元素边框外边之间的距离
• scrollWidth/scrollHeight:
  • 内容未溢出: padding+content, 相等于clientHeight/clientWidth
  • 内容溢出: 溢出内容实际占得高度, 即不管溢出内容是否隐藏高度都计算在内
• scrollLeft, scrollTop: 在滑动条将页面向上, 向左滑动时, 页面向上, 向左被卷曲的高度和宽度

获取元素相对位置和绝对位置

下面两个函数可以用来获取元素绝对位置(相对于页面)的横坐标和纵坐标。
element.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 !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。
有了绝对位置以后，获得相对位置(相对于浏览器窗口)就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。

function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
    　actualLeft += current.offsetLeft;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollLeft=document.body.scrollLeft;
    } else {
    　var elementScrollLeft=document.documentElement.scrollLeft; 
    }
    return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
    　actualTop += current. offsetTop;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollTop=document.body.scrollTop;
    } else {
    　var elementScrollTop=document.documentElement.scrollTop; 
    }
    return actualTop-elementScrollTop;
}

**说明: **
document.compatMode用来判断浏览器渲染模式:
BackCompat：标准兼容模式关闭 document.body返回正确值
CSS1Compat：标准兼容模式开启 document.documentElement返回正确值
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。

**补充: **
scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角, 详细可以百度百度。

关于document.body与document.documentElement

可以认为document.body对应于body标签元素, document.documentElement对应于html标签元素. 但它们在如上, 获取元素尺寸属性时会有些不同.

• 标准模式下(HTML4, 有文档类型声明<!DOCTYPE html>...)
  html, body默认都是内容高度, 可是:
  document.documentElement.clientHeight 等于浏览器窗口可视高度
  document.body.scrollHeight 等于浏览器窗口可视高度
  document.body.offsetTop = 0
  下面测试结果可能看不出来, 标准模式下document.documentElement.scrollTop返回正确值, document.�body.scrollTop会是0
  其他属性正常

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    * {
        margin: 0;
        border: 0;
        padding: 0;
    }
    html {
        background: blue;
        border: 10px solid red;
        margin: 10px;
    }
    body {
        background: pink;
        border: 10px solid green;
        margin: 10px;
        padding: 10px;
    }
   </style>
   </head>
   <body>
   </body>
   </html>
  

• 非标准模式下
  html, body默认100%高度, 可是:
  document.documentElement获取的属性值基本正常
  document.body.clientHeight 与 document.body.scrollHeight 获取的都是浏览器窗口可视高度
  document.body.offsetTop = 0
  下面测试结果可能看不出来, 非标准模式下document.documentElement.scrollTop返回0, document.�body.scrollTop会是正确值
  其他属性也正常
  去掉文档类型声明
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
  * {
  margin: 0;
  border: 0;
  padding: 0;
  }
  html {
  background: blue;
  border: 10px solid red;
  margin: 10px;
  }
  body {
  background: pink;
  border: 10px solid green;
  margin: 10px;
  padding: 10px;
  }
  </style>
  </head>
  <body>
  </body>
  </html>

body和html更多内容可以参考我另一篇文章