浅谈javascript中一些与DOM元素相关的属性名词

 在我们日常的工作当中经常会处理一些HTML元素的长、宽等尺寸样式，以便更好的处理文档和事件：由于工作中经常搞混一些元素大小、偏移量、客户区大小、滚动大小等等这些小东东，特意将这些东西放在一起整理一下，与大家分享：

首先说下盒子模型：盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同。

 

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。而IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

要介绍的第一个名词就是偏移量(offset)，包括元素在屏幕上占用的所有可见的空间，元素的可见大小由其高度、宽度决定，包括所有的内边距、滚动条和边框大小。通过下列四个属性可以取代元素的偏移量：

1、offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）水平滚动条的宽度、左边框宽度、右边框宽度。（border+padding+content）

2、offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、上边框宽度、下边框宽度。（border+padding+content）

3、offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。(margin)

4、offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。(marigin)

其中offsetLeft和offsetWidth属性与包含元素有关，包含的元素的引用保存在offsetParent属性中，offsetParent属性不一定与parentNode的值相等。

要想知道某个元素在页面上的便宜量，将这个元素的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;
}

要介绍的第二个名词就是客户区(client)大小：

元素的客户区大小指的是元素内容及其内边距所占据的空间，这里有两个属性clientWidth和clientHeight.

clientWidth属性就是元素内容宽度加上左右内边距的宽度（content+padding）

clientHeigth属性就是元素内容宽度加上上下内边距的宽度（content+padding）

从字面上理解，客户区大小就是元素内部的控件大小，滚动条占用的空间不计算在内。平常我们经常会用到确定浏览器窗口的大小，就可以用到下面的代码：

function getViewport(){
 if(document.compatMode=="BackCompat"){
  return {
    document.body.clientWidth,
    height:document.body.clientHeight
     };
  } else{
  return {
   document.documentElement.clientWidth,
   height:document.documentElement.clientHeight
    };
  }
}

要介绍的第三个名词就是滚动(scroll)大小了：

它指的是包含滚动内容的元素的大小，这些元素需要通过设置css 的overflow属性才能滚动，但html除外。一下4个属性与滚动大小有关系。

1、scrollHeight:在没有滚动的情况下，元素内容的总高度 (content)

2、scrollWidth:在没有滚动的情况下，元素内容的总宽度(content)

3、scrollLeft:被隐藏咋内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

4、scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

可以通过scrollLeft和scrollTop属性来确定元素当前的滚动状态，也可以来设置元素的滚动位置。

以上的这些内容仅供参考，考虑到各浏览器的差异，这些名词的解释可能有小点差异，可以参加javascript高级程序设计第三,里面有详细介绍