偏移量

offset dimension包括元素在屏幕上占用的所见空间的大小．元素的可见大小由宽高，内边距，滚动条和边框确定，注意：不包含外边距．

如图所示：

offset　dimension

offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如,<td>元素的offsetParent是作为其祖先元素的<table>元素,因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

要想取得某个元素在页面上的偏移量，就可以将这个元素的offsetLeft和offsetParent.offsetLeft相加，如此循环直到根元素就可以得到一个基本准确的值：

1
2
3
4
5
6
7
8
9
function getElementLeft(element) {
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null) {
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
  }
  return actualLeft;
}

客户区大小

client dimension，指的是元素内容及其内边距所占据的空间大小．它有２个属性clientWidth和clientHeight．如下所示：

client-dimension

从字面意思来讲：客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内．最常用的情况是确定浏览器视口大小．

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getViewport() {
	// IE 7之前的混杂模式，现代浏览器一般支持的是标准模式
  if (document.compatMode == "BackCompat") {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
}

滚动大小

scroll dimension,包含滚动内容的元素的大小．有些元素（例如<html>元素）即使在没有执行任何代码的时候也能自动添加滚动条；另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动．

  • scrollHeight:在没有滚动条的情况下，元素内容的总高度
  • scrollWidth:在没有滚动条的情况下，元素内容总宽度
  • scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
  • scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置

scroll-dimension

由于浏览器的兼容性，在取得页面的总高度时必须取得scrollHeight和clientHeight中的最大值才能保证精确的结果，举个栗子：

1
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

*注意：*以上的代码在IE混杂模式下用document.body代替document.documentElement．

通过document.body.scrollTop属性我们可以实现＊回到顶部＊效果,将其值设置为０即可．

总结：
－　每个元素都有关联一个style对象，用来确定和修改行内样式．
－　要确定某个元素的计算样式（非内联样式），可以使用getComputedStyle()方法，对于IE可以使用currentStyle属性
－　可以通过document.styleSheets集合获取样式表．

obj.style.width和obj.offsetWidth的区别

style用于取得内联样式,offsetWidth取得渲染出来的宽度(包括边框和内边距),前者可读写,后者只读,前者带有单位px,后者不带单位.