javascript

基础知识

JavaScript获取DOM元素位置和尺寸大小

基础概念

为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性

元素内尺寸	元素外尺寸	滚动尺寸
offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

// js获取元素的margin外边距

function getComputedStyle(div) {
  var computedStyle
  //    兼容IE和火狐谷歌等的写法
  if (window.getComputedStyle) {
    computedStyle = window.getComputedStyle(div, null)
  } else {
    //兼容IE的写法
    computedStyle = div.currentStyle
  }
  return computedStyle
}